From 258ba7b4be62d8640477a3bd3146d08b00cb70ec Mon Sep 17 00:00:00 2001 From: julieng Date: Fri, 17 Sep 2021 20:59:20 +0200 Subject: convert content to md --- files/fr/web/css/list-style/index.md | 154 +++++++++++++++-------------------- 1 file changed, 67 insertions(+), 87 deletions(-) (limited to 'files/fr/web/css/list-style') diff --git a/files/fr/web/css/list-style/index.md b/files/fr/web/css/list-style/index.md index 8022402371..f71aa35d3d 100644 --- a/files/fr/web/css/list-style/index.md +++ b/files/fr/web/css/list-style/index.md @@ -7,19 +7,18 @@ tags: - Reference translation_of: Web/CSS/list-style --- -
{{CSSRef}}
+{{CSSRef}} -

La propriété list-style est une propriété raccourcie qui permet de définir {{cssxref("list-style-type")}}, {{cssxref("list-style-image")}} et {{cssxref("list-style-position")}}.

+La propriété **`list-style`** est une [propriété raccourcie](/fr/docs/Web/CSS/Propriétés_raccourcies) qui permet de définir {{cssxref("list-style-type")}}, {{cssxref("list-style-image")}} et {{cssxref("list-style-position")}}. -
{{EmbedInteractiveExample("pages/css/list-style.html")}}
+{{EmbedInteractiveExample("pages/css/list-style.html")}} -
-

Note : Cette propriété s'applique aux éléments d'une liste (c'est-à-dire aux éléments pour lesquels {{cssxref("display")}}: list-item;}}). Par défaut, cela inclut les éléments {{HTMLElement("li")}}. Cette propriété peut être héritée par les éléments et si on veut donc gérer une liste de façon uniforme, on pourra appliquer la propriété à l'élément parent (qui correspond en général à {{HTMLElement("ol")}} ou à {{HTMLElement("ul")}}).

-
+> **Note :** Cette propriété s'applique aux éléments d'une liste (c'est-à-dire aux éléments pour lesquels {{cssxref("display")}}` : list-item``; `}}). Par défaut, cela inclut les éléments {{HTMLElement("li")}}. Cette propriété peut être héritée par les éléments et si on veut donc gérer une liste de façon uniforme, on pourra appliquer la propriété à l'élément parent (qui correspond en général à {{HTMLElement("ol")}} ou à {{HTMLElement("ul")}}). -

Syntaxe

+## Syntaxe -
/* Type */
+```css
+/* Type */
 list-style: square;
 
 /* Image */
@@ -40,112 +39,93 @@ list-style: none;
 list-style: inherit;
 list-style: initial;
 list-style: unset;
-
+``` -

Valeurs

+### Valeurs -

Cette propriété raccourcie peut prendre un, deux ou trois mots-clés, dans n'importe quel ordre. Si {{cssxref("list-style-type")}} et {{cssxref("list-style-image")}} sont tous les deux définis, list-style-type sera utilisé si l'image est indisponible.

+Cette propriété raccourcie peut prendre un, deux ou trois mots-clés, dans n'importe quel ordre. Si {{cssxref("list-style-type")}} et {{cssxref("list-style-image")}} sont tous les deux définis, `list-style-type` sera utilisé si l'image est indisponible. -
-
<'list-style-type'>
-
Voir {{cssxref("list-style-type")}}
-
<'list-style-image'>
-
Voir {{cssxref("list-style-image")}}
-
<'list-style-position'>
-
Voir {{cssxref("list-style-position")}}
-
none
-
Aucun style n'est utilisé.
-
+- `<'list-style-type'>` + - : Voir {{cssxref("list-style-type")}} +- `<'list-style-image'>` + - : Voir {{cssxref("list-style-image")}} +- `<'list-style-position'>` + - : Voir {{cssxref("list-style-position")}} +- `none` + - : Aucun style n'est utilisé. -

Syntaxe formelle

+### Syntaxe formelle {{csssyntax}} -

Exemples

+## Exemples -

CSS

+### CSS -
.un {
+```css
+.un {
   list-style: circle;
 }
 
 .deux {
   list-style: square inside;
-}
+} +``` -

HTML

+### HTML -
Liste 1
-<ul class="un">
-  <li>Élément 1</li>
-  <li>Élément 2</li>
-  <li>Élément 3</li>
-</ul>
+```html
+Liste 1
+
 Liste 2
-<ul class="deux">
-  <li>Élément A</li>
-  <li>Élément B</li>
-  <li>Élément C</li>
-</ul>
-
+ +``` -

Résultat

+### Résultat -

{{EmbedLiveSample('Exemples','auto', 220)}}

+{{EmbedLiveSample('Exemples','auto', 220)}} -

Accessibilité

+## Accessibilité -

Safari ne reconnait pas (incorrectement) les listes non ordonnées lorsque list-style:none leur est appliqué et ne les ajoute pas dans l'arbre d'accessibilité (utilisé par les lecteurs d'écrans). Pour pallier ce problème, on peut ajouter un espace sans chasse comme pseudo-contenu avant chaque élément de liste afin que la liste soit correctement annoncée.

+Safari ne reconnait pas (incorrectement) les listes non ordonnées lorsque `list-style:none` leur est appliqué et ne les ajoute pas dans l'arbre d'accessibilité (utilisé par les lecteurs d'écrans). Pour pallier ce problème, on peut ajouter un [espace sans chasse](https://fr.wikipedia.org/wiki/Espace_sans_chasse) comme [pseudo-contenu](/fr/docs/Web/CSS/content) avant chaque élément de liste afin que la liste soit correctement annoncée. -
ul {
+```css
+ul {
   list-style: none;
 }
 
 ul li::before {
   content: "\200B";
 }
-
+``` - +- [VoiceOver et `list-style-type: none` – Unfettered Thoughts (en anglais)](https://unfetteredthoughts.net/2017/09/26/voiceover-and-list-style-type-none/) +- [Comprendre les règles WCAG 1.3](/fr/docs/Web/Accessibility/Understanding_WCAG/Perceivable#Guideline_1.3_%E2%80%94_Create_content_that_can_be_presented_in_different_ways) +- _[Understanding Success Criterion 1.3.1, W3C Understanding WCAG 2.0 ](https://www.w3.org/TR/UNDERSTANDING-WCAG20/content-structure-separation-programmatic.html)_[(en anglais)](https://www.w3.org/TR/UNDERSTANDING-WCAG20/content-structure-separation-programmatic.html) -

Spécifications

- - - - - - - - - - - - - - - - - - - - - -
SpécificationÉtatCommentaires
{{SpecName('CSS3 Lists', '#list-style-property', 'list-style')}}{{Spec2('CSS3 Lists')}}Aucun changement.
{{SpecName('CSS2.1', 'generate.html#propdef-list-style', 'list-style')}}{{Spec2('CSS2.1')}}Définition initiale.
- -

{{cssinfo}}

- -

Compatibilité des navigateurs

- -

{{Compat("css.properties.list-style")}}

- -

Voir aussi

- - +## Spécifications + +| Spécification | État | Commentaires | +| ------------------------------------------------------------------------------------------------ | -------------------------------- | -------------------- | +| {{SpecName('CSS3 Lists', '#list-style-property', 'list-style')}} | {{Spec2('CSS3 Lists')}} | Aucun changement. | +| {{SpecName('CSS2.1', 'generate.html#propdef-list-style', 'list-style')}} | {{Spec2('CSS2.1')}} | Définition initiale. | + +{{cssinfo}} + +## Compatibilité des navigateurs + +{{Compat("css.properties.list-style")}} + +## Voir aussi + +- {{cssxref("list-style-type")}} +- {{cssxref("list-style-image")}} +- {{cssxref("list-style-position")}} -- cgit v1.2.3-54-g00ecf