diff options
Diffstat (limited to 'files/fr/web/css/list-style')
| -rw-r--r-- | files/fr/web/css/list-style/index.md | 124 |
1 files changed, 77 insertions, 47 deletions
diff --git a/files/fr/web/css/list-style/index.md b/files/fr/web/css/list-style/index.md index f71aa35d3d..4c1b0876f0 100644 --- a/files/fr/web/css/list-style/index.md +++ b/files/fr/web/css/list-style/index.md @@ -1,19 +1,24 @@ --- title: list-style slug: Web/CSS/list-style -tags: - - CSS - - Propriété - - Reference translation_of: Web/CSS/list-style +browser-compat: css.properties.list-style --- {{CSSRef}} -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")}}. +La propriété **`list-style`** est une [propriété raccourcie](/fr/docs/Web/CSS/Shorthand_properties) qui permet de définir [`list-style-type`](/fr/docs/Web/CSS/list-style-type), [`list-style-image`](/fr/docs/Web/CSS/list-style-image) et [`list-style-position`](/fr/docs/Web/CSS/list-style-position). {{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 [`display`](/fr/docs/Web/CSS/display) vaut `list-item`). [Par défaut](https://www.w3.org/TR/html5/rendering.html#lists), cela inclut les éléments [`<li>`](/fr/docs/Web/HTML/Element/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 à [`<ol>`](/fr/docs/Web/HTML/Element/ol) ou à [`<ul>`](/fr/docs/Web/HTML/Element/ul)). + +## Propriétés détaillées correspondantes + +Cette propriété est une propriété raccourcie pour les propriétés CSS : + +- [`list-style-image`](/fr/docs/Web/CSS/list-style-image) +- [`list-style-position`](/fr/docs/Web/CSS/list-style-position) +- [`list-style-type`](/fr/docs/Web/CSS/list-style-type) ## Syntaxe @@ -33,46 +38,82 @@ list-style: georgian inside; /* type | image | position */ list-style: lower-roman url('../img/etoile.png') outside; + +/* Valeur avec un mot-clé */ list-style: none; /* Valeurs globales */ list-style: inherit; list-style: initial; +list-style: revert; list-style: unset; ``` -### Valeurs +Cette propriété raccourcie peut prendre un, deux ou trois mots-clés, dans n'importe quel ordre. Si [`list-style-type`](/fr/docs/Web/CSS/list-style-type) et [`list-style-image`](/fr/docs/Web/CSS/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. +### Valeurs -- `<'list-style-type'>` - - : Voir {{cssxref("list-style-type")}} -- `<'list-style-image'>` - - : Voir {{cssxref("list-style-image")}} -- `<'list-style-position'>` - - : Voir {{cssxref("list-style-position")}} +- [`list-style-type`](/fr/docs/Web/CSS/list-style-type) + - : Voir [`list-style-type`](/fr/docs/Web/CSS/list-style-type). +- [`list-style-image`](/fr/docs/Web/CSS/list-style-image) + - : Voir [`list-style-image`](/fr/docs/Web/CSS/list-style-image). +- [`list-style-position`](/fr/docs/Web/CSS/list-style-position) + - : Voir [`list-style-position`](/fr/docs/Web/CSS/list-style-position). - `none` - : Aucun style n'est utilisé. -### Syntaxe formelle +## Accessibilité -{{csssyntax}} +Safari ne reconnait pas 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). -## Exemples +La solution la plus directe est d'affecter `role="list"` à l'élément `<ul>` dans votre code HTML. Cela rajoute les valeurs sémantiques de la liste sans impacter le design. -### CSS +Pour pallier ce problème en utilisant uniquement les styles CSS, 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. ```css -.un { - list-style: circle; +ul { + list-style: none; } -.deux { - list-style: square inside; +ul li::before { + content: "\200B"; +} +``` + +Une autre approche consiste à affecter une valeur `url` à la propriété `list-style` : + +```css +nav ol, nav ul { + list-style: none; +} + +/* cela devient : */ + +nav ol, nav ul { + list-style: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'/%3E"); } ``` -### HTML +N'utilisez les palliatifs CSS que dans le cas où la solution en HTML n'est pas disponible et les conséquences inattendues nuisant à l'expérience utilisateur sont écartées durant des essais. + +- [_'Fixing' Lists_ (en anglais)](https://www.scottohara.me/blog/2019/01/12/lists-and-safari.html) +- [_VoiceOver and_ `list-style-type: none` – _Unfettered Thoughts_ (en anglais)](https://unfetteredthoughts.net/2017/09/26/voiceover-and-list-style-type-none/) +- [MDN Comprendre les règles WCAG 1.3](/fr/docs/Web/Accessibility/Understanding_WCAG/Perceivable#guideline_1.3_—_create_content_that_can_be_presented_in_different_ways) +- [_Understanding Success Criterion 1.3.1 | W3C Understanding WCAG 2.0_ (en anglais)](https://www.w3.org/TR/UNDERSTANDING-WCAG20/content-structure-separation-programmatic.html) + +## Définition formelle + +{{CSSInfo}} + +## Syntaxe formelle + +{{csssyntax}} + +## Exemples + +### Définition de list-style-type et position + +#### HTML ```html Liste 1 @@ -89,43 +130,32 @@ Liste 2 </ul> ``` -### Résultat - -{{EmbedLiveSample('Exemples','auto', 220)}} - -## 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](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. +#### CSS ```css -ul { - list-style: none; +.un { + list-style: circle; } -ul li::before { - content: "\200B"; +.deux { + list-style: square inside; } ``` -- [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) +#### Résultat -## Spécifications +{{EmbedLiveSample('', 'auto', 220)}} -| 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. | +## Spécifications -{{cssinfo}} +{{Specifications}} ## Compatibilité des navigateurs -{{Compat("css.properties.list-style")}} +{{Compat}} ## Voir aussi -- {{cssxref("list-style-type")}} -- {{cssxref("list-style-image")}} -- {{cssxref("list-style-position")}} +- [`list-style-type`](/fr/docs/Web/CSS/list-style-type) +- [`list-style-image`](/fr/docs/Web/CSS/list-style-image) +- [`list-style-position`](/fr/docs/Web/CSS/list-style-position)
\ No newline at end of file |