diff options
| -rw-r--r-- | files/fr/web/css/border-style/index.md | 302 | ||||
| -rw-r--r-- | files/fr/web/css/list-style-position/index.md | 94 | ||||
| -rw-r--r-- | files/fr/web/css/list-style-position/starsolid.gif | bin | 0 -> 272 bytes | |||
| -rw-r--r-- | files/fr/web/css/list-style-type/index.md | 507 | ||||
| -rw-r--r-- | files/fr/web/css/list-style/index.md | 124 |
5 files changed, 638 insertions, 389 deletions
diff --git a/files/fr/web/css/border-style/index.md b/files/fr/web/css/border-style/index.md index 49d502d41e..9abaeda0da 100644 --- a/files/fr/web/css/border-style/index.md +++ b/files/fr/web/css/border-style/index.md @@ -1,17 +1,25 @@ --- title: border-style slug: Web/CSS/border-style -tags: - - CSS - - Propriété - - Reference translation_of: Web/CSS/border-style +browser-compat: css.properties.border-style --- {{CSSRef}} -La propriété CSS **`border-style`** est une [propriété raccourcie](/fr/docs/Web/CSS/Propri%C3%A9t%C3%A9s_raccourcies) qui permet de définir le style des lignes utilisées pour les bordures des quatre côtés de la boîte d'un élément. +La propriété CSS **`border-style`** est une [propriété raccourcie](/fr/docs/Web/CSS/Shorthand_properties) qui permet de définir le style des lignes utilisées pour les bordures des quatre côtés de la boîte d'un élément. -{{EmbedInteractiveExample("pages/css/border-style.html")}}Syntaxe +{{EmbedInteractiveExample("pages/css/border-style.html")}} + +## Propriétés détaillées correspondantes + +Cette propriété est une propriété raccourcie pour les propriétés CSS : + +- [`border-bottom-style`](/fr/docs/Web/CSS/border-bottom-style) +- [`border-left-style`](/fr/docs/Web/CSS/border-left-style) +- [`border-right-style`](/fr/docs/Web/CSS/border-right-style) +- [`border-top-style`](/fr/docs/Web/CSS/border-top-style) + +## Syntaxe ```css /* Valeurs avec un mot-clé */ @@ -38,17 +46,18 @@ border-style: none solid dotted dashed; /* Valeurs globales */ border-style: inherit; border-style: initial; +border-style: revert; border-style: unset; ``` -> **Note :** La valeur par défaut de `border-style` est `none`. Cela signifie que si on modifie {{cssxref("border-width")}} et {{cssxref("border-color")}}, on ne verra pas la bordure tant que cette propriété n'est pas différente de `none` ou de `hidden`. +> **Note :** La valeur par défaut de `border-style` est `none`. Cela signifie que si on modifie [`border-width`](/fr/docs/Web/CSS/border-width) et [`border-color`](/fr/docs/Web/CSS/border-color), on ne verra pas la bordure tant que cette propriété n'est pas différente de `none` ou de `hidden`. -La propriété `border-style` peut être définie avec une, deux, trois ou quatre valeurs : +La propriété `border-style` peut être définie avec une, deux, trois ou quatre valeurs : -- **Avec une valeur**, celle-ci s'applique aux quatre côté -- **Avec deux valeurs**, la première s'applique aux côté haut et bas et la seconde aux côtés gauche et droit -- **Avec trois valeurs**, la première s'applique au côté haut, la deuxième aux côtés gauche et droit puis la troisième au côté bas -- **Avec quatre valeurs**, les valeurs s'applique dans le sens des aiguilles d'une montre (la première sur le côté haut, la deuxième sur le côté droit, la troisième sur le côté bas et la quatrième sur le côté gauche). +- Avec **une valeur**, celle-ci s'applique aux **quatre côtés**. +- Avec **deux valeurs**, la première s'applique aux côtés **haut et bas** et la seconde aux côtés **gauche et droit**. +- Avec **trois valeurs**, la première s'applique au côté **haut**, la deuxième aux côtés **gauche et droit** puis la troisième au côté **bas**. +- Avec **quatre valeurs**, les valeurs s'appliquent dans le sens des aiguilles d'une montre (la première sur le côté **haut**, la deuxième sur le côté **droit**, la troisième sur le côté **bas** et la quatrième sur le côté **gauche**). Chacune des valeurs peut être un des mots-clés parmi la liste suivante. @@ -56,195 +65,126 @@ Chacune des valeurs peut être un des mots-clés parmi la liste suivante. - `<line-style>` - - : Un mot-clé qui décrit le style utilisé pour la bordure sur les côtés de la boîte. Ce mot-clé peut prendre l'une des valeurs suivantes : - - <table class="standard-table"> - <tbody> - <tr> - <td><code>none</code></td> - <td> - <div - style=" - border-width: 3px; - margin: 0.5em; - width: 3em; - height: 3em; - background-color: palegreen; - " - > - - </div> - </td> - <td> - L'effet obtenu est le même qu'avec <code>hidden</code> : aucune bordure - n'est affichée. Dans ce cas, sauf si une image d'arrière-plan est - définie, la valeur calculée de {{cssxref("border-width")}} sera - <code>0</code>, même si cette dernière indique une autre valeur. - Lorsqu'utilisée sur une cellule d'un tableau avec la fusion des - bordures, <code>none</code> a la priorité la plus basse donc si une - autre bordure est définie et fusionne avec celle-ci, elle sera - affichée. - </td> - </tr> - <tr> - <td><code>hidden</code></td> - <td> - L'effet obtenu est le même qu'avec <code>none</code> : aucune bordure - n'est affichée. Dans ce cas, sauf si une image d'arrière-plan est - définie, la valeur calculée de {{cssxref("border-width")}} sera - <code>0</code>, même si cette dernière indique une autre valeur. - Lorsqu'utilisée sur une cellule d'un tableau avec la fusion des - bordures, <code>hidden</code> a la plus haute priorité et donc si une - autre bordure est définie et fusionne avec celle-ci, aucune ne sera - affichée. - </td> - </tr> - <tr> - <td><code>dotted</code></td> - <td> - Affiche une série de points ronds. L'espace entre ces points n'est pas - défini par la spécification et est donc laissé à l'implémentation. Le - rayon des points correspond à la moitié de - {{cssxref("border-width")}}. - </td> - </tr> - <tr> - <td><code>dashed</code></td> - <td> - Affiche une série de tirets. La taille de ces tirets n'est pas définie - par la spécification et est laissée à l'implémentation. - </td> - </tr> - <tr> - <td><code>solid</code></td> - <td>Affiche une ligne droite continue.</td> - </tr> - <tr> - <td><code>double</code></td> - <td> - Deux lignes droites sont affichées dont la somme des épaisseurs - correspond à la valeur fournie par {{cssxref("border-width")}}. - </td> - </tr> - <tr> - <td><code>groove</code></td> - <td> - La bordure crée un effet 3D donnant l'impression qu'elle a été gravée - dans le document. On obtient un effet opposé à <code>ridge</code>. - </td> - </tr> - <tr> - <td><code>ridge</code></td> - <td> - La bordure crée un effet 3D donnant l'impression que la bordure ressort - du document. L'effet obtenu est opposé à celui obtenu avec - <code>groove</code>. - </td> - </tr> - <tr> - <td><code>inset</code></td> - <td> - La bordure crée un effet 3D qui donne l'impression que la boîte est - renfoncée dans le document (l'effet obtenu est opposé à celui obtenu - avec <code>outset</code>). Lorsqu'elle est appliquée sur une cellule de - tableau et que {{cssxref("border-collapse")}} vaut - <code>collapsed</code>, cette valeur se comporte comme - <code>groove</code>. - </td> - </tr> - <tr> - <td><code>outset</code></td> - <td> - <p> - La bordure crée un effet 3D qui fait ressortir la boîte (l'effet est - opposé à <code>inset</code>). Lorsqu'elle est utilisé sur une cellule - de tableau avec {{cssxref("border-collapse")}} qui vaut - <code>collapsed</code>, cette valeur se comporte comme - <code>ridge</code>. - </p> - </td> - </tr> - </tbody> - </table> - -### Syntaxe formelle + - : Un mot-clé qui décrit le style utilisé pour la bordure sur les côtés de la boîte. Ce mot-clé peut prendre l'une des valeurs suivantes : + + - `none` + - : L'effet obtenu est le même qu'avec `hidden` : aucune bordure n'est affichée. Dans ce cas, sauf si une image d'arrière-plan est définie (avec [`background-image`](/fr/docs/Web/CSS/background-image)), la valeur calculée de [`border-width`](/fr/docs/Web/CSS/border-width) sera `0`, même si cette dernière indique une autre valeur. Lorsqu'utilisée sur une cellule d'un tableau avec la fusion des bordures, `none` a la priorité la plus *basse* ; donc, si une autre bordure est définie et fusionne avec celle-ci, elle sera affichée. + - `hidden` + - : L'effet obtenu est le même qu'avec `none` : aucune bordure n'est affichée. Dans ce cas, sauf si une image d'arrière-plan est définie (avec [`background-image`](/fr/docs/Web/CSS/background-image)), la valeur calculée de [`border-width`](/fr/docs/Web/CSS/border-width) sera `0`, même si cette dernière indique une autre valeur. Lorsqu'utilisée sur une cellule d'un tableau avec la fusion des bordures, `hidden` a *la plus haute priorité* et donc si une autre bordure est définie et fusionne avec celle-ci, aucune ne sera affichée. + - `dotted` + - : Affiche une série de points ronds. L'espace entre ces points n'est pas défini par la spécification et est donc laissé à l'implémentation. Le rayon des points correspond à la moitié de [`border-width`](/fr/docs/Web/CSS/border-width). + - `dashed` + - : Affiche une série de tirets. La taille de ces tirets n'est pas définie par la spécification et est laissée à l'implémentation. + - `solid` + - : Affiche une ligne droite continue. + - `double` + - : Deux lignes droites sont affichées dont la somme des épaisseurs correspond à la valeur fournie par [`border-width`](/fr/docs/Web/CSS/border-width). + - `groove` + - : La bordure crée un effet 3D donnant l'impression qu'elle a été gravée dans le document. On obtient un effet opposé à `ridge`. + - `ridge` + - : La bordure crée un effet 3D donnant l'impression que la bordure ressort du document. L'effet obtenu est opposé à celui obtenu avec `groove`. + - `inset` + - : La bordure crée un effet 3D qui donne l'impression que la boîte est renfoncée dans le document (l'effet obtenu est opposé à celui obtenu avec `outset`). Lorsqu'elle est appliquée sur une cellule de tableau et que [`border-collapse`](/fr/docs/Web/CSS/border-collapse) vaut `collapsed`, cette valeur se comporte comme `groove`. + - `outset` + - : La bordure crée un effet 3D qui fait ressortir la boîte (l'effet est opposé à `inset`). Lorsqu'elle est utilisée sur une cellule de tableau avec [`border-collapse`](/fr/docs/Web/CSS/border-collapse) qui vaut `collapsed`, cette valeur se comporte comme `ridge`. + +## Définition formelle + +{{CSSInfo}} + +## Syntaxe formelle {{csssyntax}} ## Exemples -### CSS +### Toutes les valeurs de border-style + +Voici un exemple utilisant toutes les valeurs de cette propriété. + +#### HTML + +```html +<pre class="b1">none</pre> +<pre class="b2">hidden</pre> +<pre class="b3">dotted</pre> +<pre class="b4">dashed</pre> +<pre class="b5">solid</pre> +<pre class="b6">double</pre> +<pre class="b7">groove</pre> +<pre class="b8">ridge</pre> +<pre class="b9">inset</pre> +<pre class="b10">outset</pre> +``` + +#### CSS ```css -/* On définit la mise en forme */ -/* du tableau. */ -table { - border-width: 3px; - background-color: #52E396; +pre { + height: 80px; + width: 120px; + margin: 20px; + padding: 20px; + display: inline-block; + background-color: palegreen; + border-width: 5px; + box-sizing: border-box; } -tr, td { - padding: 2px; + +/* Voici des classes pour les exemples */ +.b1 { + border-style: none; } -/* voici des classes pour les exemples */ -.b1 {border-style:none;} -.b2 {border-style:hidden;} -.b3 {border-style:dotted;} -.b4 {border-style:dashed;} -.b5 {border-style:solid;} -.b6 {border-style:double;} -.b7 {border-style:groove;} -.b8 {border-style:ridge;} -.b9 {border-style:inset;} -.b10 {border-style:outset;} -``` +.b2 { + border-style: hidden; +} -### HTML +.b3 { + border-style: dotted; +} -```html -<table> - <tr> - <td class="b1">none</td> - <td class="b2">hidden</td> - <td class="b3">dotted</td> - <td class="b4">dashed</td> - </tr> - <tr> - <td class="b5">solid</td> - <td class="b6">double</td> - <td class="b7">groove</td> - <td class="b8">ridge</td> - </tr> - <tr> - <td class="b9">inset</td> - <td class="b10">outset</td> - </tr> -</table> -``` +.b4 { + border-style: dashed; +} -### Résultat +.b5 { + border-style: solid; +} -{{EmbedLiveSample('Exemples', 300, 200)}} +.b6 { + border-style: double; +} -## Spécifications +.b7 { + border-style: groove; +} -| Spécification | État | Commentaires | -| ------------------------------------------------------------------------------------------------ | ---------------------------------------- | -------------------------- | -| {{SpecName('CSS3 Backgrounds', '#border-style', 'border-style')}} | {{Spec2('CSS3 Backgrounds')}} | Aucune modification. | -| {{SpecName('CSS2.1', 'box.html#propdef-border-style', 'border-style')}} | {{Spec2('CSS2.1')}} | Ajout du mot-clé `hidden`. | -| {{SpecName('CSS1', '#border-style', 'border-style')}} | {{Spec2('CSS1')}} | Définition initiale. | +.b8 { + border-style: ridge; +} -{{cssinfo}} +.b9 { + border-style: inset; +} + +.b10 { + border-style: outset; +} +``` + +#### Résultat + +{{EmbedLiveSample('', '1200', 450)}} + +## Spécifications + +{{Specifications}} ## Compatibilité des navigateurs -{{Compat("css.properties.border-style")}} +{{Compat}} ## Voir aussi -- Les autres propriétés raccourcies liées aux bordures : - - - {{cssxref("border")}}, - - {{cssxref("border-width")}}, - - {{cssxref("border-color")}}, - - {{cssxref("border-radius")}}. +- Les autres propriétés raccourcies liées aux bordures : [`border`](/fr/docs/Web/CSS/border), [`border-width`](/fr/docs/Web/CSS/border-width), [`border-color`](/fr/docs/Web/CSS/border-color), [`border-radius`](/fr/docs/Web/CSS/border-radius) diff --git a/files/fr/web/css/list-style-position/index.md b/files/fr/web/css/list-style-position/index.md index 213038f27a..4ae92f6774 100644 --- a/files/fr/web/css/list-style-position/index.md +++ b/files/fr/web/css/list-style-position/index.md @@ -1,35 +1,32 @@ --- title: list-style-position slug: Web/CSS/list-style-position -tags: - - CSS - - Propriété - - Reference translation_of: Web/CSS/list-style-position +browser-compat: css.properties.list-style-position --- {{CSSRef}} -La propriété **`list-style-position`** permet de définir la position du marqueur (cf. {{cssxref("::marker")}} de liste par rapport à la boîte principale. +La propriété **`list-style-position`** permet de définir la position du marqueur (cf. [`::marker`](/fr/docs/Web/CSS/::marker)) de liste par rapport à la boîte principale. {{EmbedInteractiveExample("pages/css/list-style-position.html")}} -Pour définir cette propriété, on pourra aussi utiliser la propriété raccourcie {{cssxref("list-style")}}. +Pour définir cette propriété, on pourra aussi utiliser la propriété raccourcie [`list-style`](/fr/docs/Web/CSS/list-style). -> **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](https://www.w3.org/TR/html5/rendering.html#lists), 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")}}). -> - Une différence de comportement existe entre les navigateurs lorsqu'un élément de bloc est placé en premier au sein d'un élément de liste avec `list-style-position: inside`. Chrome et Safari placent l'élément sur la même ligne que la boîte du marqueur. En revanche, Firefox, Internet Explorer et Opera placent l'élément sur la ligne suivante. Voir {{bug("36854")}} pour plus d'informations. +> **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)). + +Une différence de comportement existe entre les navigateurs lorsqu'un élément de bloc est placé en premier au sein d'un élément de liste avec `list-style-position: inside`. Chrome et Safari placent l'élément sur la même ligne que la boîte du marqueur. En revanche, Firefox, Internet Explorer et Opera placent l'élément sur la ligne suivante. Voir [le bug 36854 de Firefox](https://bugzilla.mozilla.org/show_bug.cgi?id=36854) pour plus d'informations. ## Syntaxe ```css -/* Valeurs avec mot-clé */ +/* Valeurs avec un mot-clé */ list-style-position: inside; list-style-position: outside; /* Valeurs globales */ list-style-position: inherit; list-style-position: initial; +list-style-position: revert; list-style-position: unset; ``` @@ -38,50 +35,38 @@ La propriété `list-style-position` est définie avec l'un des mots-clés suiva ### Valeurs - `inside` - - : La boîte du marqueur ({{cssxref("::marker")}}) est la première boîte en ligne (_inline_) de la boîte principale. Le contenu de l'élément sera appliqué à la suite de la boîte du marqueur. + - : La boîte du marqueur ([`::marker`](/fr/docs/Web/CSS/::marker)) est la première boîte en ligne (_inline_) de la boîte principale. Le contenu de l'élément sera appliqué à la suite de la boîte du marqueur. - `outside` - - : La boîte du marqueur ({{cssxref("::marker")}}) est en dehors de la boîte principale. - -### Syntaxe formelle + - : La boîte du marqueur ([`::marker`](/fr/docs/Web/CSS/::marker)) est en dehors de la boîte principale. -{{csssyntax}} +## Définition formelle -## Exemples +{{CSSInfo}} -### CSS +## Syntaxe formelle -```css -.one { - list-style:square inside; -} +{{csssyntax}} -.two { - list-style-position: outside; - list-style-type: circle; -} +## Exemples -.three { - list-style-image: url("https://mdn.mozillademos.org/files/11979/starsolid.gif"); - list-style-position: inherit; -} -``` +### Définition de la position des éléments d'une liste -### HTML +#### HTML ```html -<ul class="one"> Liste 1 +<ul class="un">Liste 1 <li>Élément 1-1</li> <li>Élément 1-2</li> <li>Élément 1-3</li> <li>Élément 1-4</li> </ul> -<ul class="two"> Liste 2 +<ul class="deux">Liste 2 <li>Élément 2-1</li> <li>Élément 2-2</li> <li>Élément 2-3</li> <li>Élément 2-4</li> </ul> -<ul class="three"> Liste 3 +<ul class="trois">Liste 3 <li>Élément 3-1</li> <li>Élément 3-2</li> <li>Élément 3-3</li> @@ -89,26 +74,39 @@ La propriété `list-style-position` est définie avec l'un des mots-clés suiva </ul> ``` -### Résultat +#### CSS -{{EmbedLiveSample("Exemples","200","420")}} +```css +.un { + list-style-position: inside; + list-style-type: square; +} -## Spécifications +.deux { + list-style-position: outside; + list-style-type: circle; +} -| Spécification | État | Commentaires | -| ------------------------------------------------------------------------------------------------------------------------ | -------------------------------- | -------------------- | -| {{SpecName('CSS3 Lists', '#list-style-position-property', 'list-style-position')}} | {{Spec2('CSS3 Lists')}} | Aucun changement. | -| {{SpecName('CSS2.1', 'generate.html#propdef-list-style-position', 'list-style-position')}} | {{Spec2('CSS2.1')}} | Définition initiale. | +.trois { + list-style-position: inside; + list-style-image: url("starsolid.gif"); +} +``` + +#### Résultat + +{{EmbedLiveSample('', 200, 420)}} + +## Spécifications -{{cssinfo}} +{{Specifications}} ## Compatibilité des navigateurs -{{Compat("css.properties.list-style-position")}} +{{Compat}} ## Voir aussi -- {{cssxref("list-style")}} -- {{cssxref("list-style-type")}} -- {{cssxref("list-style-image")}} -- {{cssxref("::marker")}} +- [`list-style`](/fr/docs/Web/CSS/list-style) +- [`list-style-type`](/fr/docs/Web/CSS/list-style-type) +- [`list-style-image`](/fr/docs/Web/CSS/list-style-image) diff --git a/files/fr/web/css/list-style-position/starsolid.gif b/files/fr/web/css/list-style-position/starsolid.gif Binary files differnew file mode 100644 index 0000000000..5508bef9c0 --- /dev/null +++ b/files/fr/web/css/list-style-position/starsolid.gif diff --git a/files/fr/web/css/list-style-type/index.md b/files/fr/web/css/list-style-type/index.md index fd7205ffb8..c8376a80ec 100644 --- a/files/fr/web/css/list-style-type/index.md +++ b/files/fr/web/css/list-style-type/index.md @@ -1,19 +1,18 @@ --- title: list-style-type slug: Web/CSS/list-style-type -tags: - - CSS - - Propriété - - Reference translation_of: Web/CSS/list-style-type +browser-compat: css.properties.list-style-type --- {{CSSRef}} -La propriété** `list-style-type`** permet de définir l'apparence de la puce d'un élément de liste (un cercle, un caractère, un compteur spécifique, etc.). +La propriété **`list-style-type`** permet de définir l'apparence de la puce d'un élément de liste (un cercle, un caractère, un compteur spécifique, etc.). -{{EmbedInteractiveExample("pages/css/list-style-type.html")}}La [couleur](/fr/docs/Web/CSS/color_value) de la puce utilisée sera la même que la couleur calculée de l'élément sur lequel elle s'applique. +{{EmbedInteractiveExample("pages/css/list-style-type.html")}} -Cette propriété s'applique aux éléments d'une liste (c'est-à-dire les éléments pour lesquels on a {{cssxref("display")}}`: list-item;`. Cela inclut par défaut les éléments {{HTMLElement("li")}} et {{HTMLElement("summary")}}. Il est possible de l'utiliser pour d'autres éléments si on utilise `display: list-item` sur ceux-ci. Cette propriété est héritée et on peut donc l'appliquer aux éléments parents (généralement {{HTMLElement("ol")}} ou {{HTMLElement("ul")}}) afin qu'elle s'applique à l'ensemble des éléments fils. +La [couleur](/fr/docs/Web/CSS/color_value) de la puce utilisée sera la même que la couleur calculée de l'élément sur lequel elle s'applique. + +Cette propriété s'applique aux éléments d'une liste (c'est-à-dire les éléments pour lesquels on a `display: list-item;`). Cela inclut par défaut les éléments [`li`](/fr/docs/Web/HTML/Element/li) et [`summary`](/fr/docs/Web/HTML/Element/summary). Il est possible de l'utiliser pour d'autres éléments si on utilise `display: list-item` sur ceux-ci. Cette propriété est héritée et on peut donc l'appliquer aux éléments parents (généralement [`ol`](/fr/docs/Web/HTML/Element/ol) ou [`ul`](/fr/docs/Web/HTML/Element/ul)) afin qu'elle s'applique à l'ensemble des éléments fils. ## Syntaxe @@ -24,7 +23,7 @@ list-style-type: circle; list-style-type: square; list-style-type: decimal; list-style-type: georgian; -list-style-type: cjk-ideographic; +list-style-type: trad-chinese-informal; list-style-type: kannada; /* Une chaîne de caractères */ @@ -41,32 +40,38 @@ list-style-type: none; /* Valeurs globales */ list-style-type: inherit; list-style-type: initial; +list-style-type: revert; list-style-type: unset; ``` -La propriété `list-style-type` peut être définie grâce à : +La propriété `list-style-type` peut être définie grâce à : + +- une valeur `<custom-ident>` +- une valeur `symbols()` +- une valeur `<string>` +- le mot-clé `none`. -- une valeur [`<custom-ident>`](#custom-ident) -- une valeur [`symbols()`](#symbol) -- une valeur [`<string>`](#str) -- au mot-clé [`none`](#none*) +À noter que : + +- Pour certains types, il est nécessaire d'avoir une police correspondante installée pour que l'affichage fonctionne. +- Pour des raisons historiques, `cjk-ideographic` est synonyme de `trad-chinese-informal`. ### Valeurs -- {{cssxref("custom-ident", "<custom-ident>")}} - - : Un identifiant correspondant à la valeur d'un {{cssxref("@counter-style")}} ou à un style prédéfini : -- {{cssxref("symbols()")}} +- [`<custom-ident>`](/fr/docs/Web/CSS/custom-ident) + - : Un identifiant correspondant à la valeur d'un [`@counter-style`](/fr/docs/Web/CSS/@counter-style) ou à un style prédéfini : +- [`symbols()`](/fr/docs/Web/CSS/symbols()) - : Définit un style de puce utilisé. +- [`<string>`](/fr/docs/Web/CSS/string) + - : La chaîne de caractères indiquée sera utilisée comme puce. - `none` - : Aucun marqueur n'est affiché. -- {{cssxref("<string>")}} - - : La chaîne de caractères indiquée sera utilisée comme puce - `disc` - - : Un disque plein (la valeur par défaut) + - : Un disque plein (la valeur par défaut). - `circle` - - : Un cercle vide + - : Un cercle vide. - `square` - - : Un carré plein + - : Un carré plein. - `decimal` - : Des nombres décimaux, commençant par 1. - `cjk-decimal` {{experimental_inline}} @@ -88,14 +93,14 @@ La propriété `list-style-type` peut être définie grâce à : - `armenian` - : La numérotation arménienne traditionnelle. - `bengali`, `-moz-bengali` - - : La numérotation bengali. + - : La numérotation bengalie. - `cambodian`/`khmer` - : La numérotation cambodgienne/khmer. - `cjk-earthly-branch`, `-moz-cjk-earthly-branch` - - : Des nombres ordinaux Han de la « branche terrestre ». + - : Des nombres ordinaux Han de la « branche terrestre ». - `cjk-heavenly-stem`, `-moz-cjk-heavenly-stem` - - : Des nombres ordinaux Han de la « souche céleste ». -- `cjk-ideographic`{{experimental_inline}} + - : Des nombres ordinaux Han de la « souche céleste ». +- `cjk-ideographic` {{experimental_inline}} - : Identique à `trad-chinese-informal`. - `devanagari`, `-moz-devanagari` - : La numérotation devanagari. @@ -108,7 +113,7 @@ La propriété `list-style-type` peut être définie grâce à : - `gurmukhi`, `-moz-gurmukhi` - : La numérotation gurmukhi. - `hebrew` {{experimental_inline}} - - : La numérotation hébraïque traditionnelle + - : La numérotation hébraïque traditionnelle. - `hiragana` {{experimental_inline}} - : Le lettrage lexicographique hiragana. - `hiragana-iroha` {{experimental_inline}} @@ -162,40 +167,64 @@ La propriété `list-style-type` peut être définie grâce à : - `upper-armenian` {{experimental_inline}}\* - : La numérotation arménienne traditionnelle en majuscules. - `disclosure-open` {{experimental_inline}} - - : Un symbole indiquant qu'un contrôle de révélation (tel qu'un élément {{HTMLElement("details")}}) est déplié/révélé. + - : Un symbole indiquant qu'un contrôle de révélation (tel qu'un élément [`<details>`](/fr/docs/Web/HTML/Element/details)) est déplié/révélé. - `disclosure-closed` {{experimental_inline}} - - : Un symbole indiquant qu'un contrôle de révélation (tel qu'un élément {{HTMLElement("details")}}) est replié/masqué. + - : Un symbole indiquant qu'un contrôle de révélation (tel qu'un élément [`<details>`](/fr/docs/Web/HTML/Element/details)) est replié/masqué. -### Syntaxe formelle +### Extensions non-standards -{{csssyntax}} +Mozilla (Firefox), Blink (Chrome et Opera) et WebKit (Safari) fournissent certains types prédéfinis afin d'assurer la prise en charge de types de liste dans d'autres langues. Consultez le tableau de compatibilité pour l'extension à utiliser selon le navigateur. -## Exemples +- `-moz-ethiopic-halehame` +- `-moz-ethiopic-halehame-am` +- `ethiopic-halehame-ti-er`, `-moz-ethiopic-halehame-ti-er` +- `ethiopic-halehame-ti-et`, `-moz-ethiopic-halehame-ti-et` +- `hangul`, `-moz-hangul` +- `hangul-consonant`, `-moz-hangul-consonant` +- `urdu`, `-moz-urdu` + +## Accessibilité -### CSS +Le lecteur d'écran [VoiceOver](https://help.apple.com/voiceover/info/guide/) n'annonce pas, incorrectement, les listes non ordonnées lorsque `list-style-type: none` leur est appliqué. 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 -ol.normal { - list-style-type: upper-alpha; +ul { + list-style-type: none; } -/* on peut aussi utiliser la propriété raccourcie */ -/* "list-style": */ -ol.shortcut { - list-style: upper-alpha; +ul li::before { + content: "\200B"; } ``` -### 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_%E2%80%94_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 l'apparence des puces + +#### HTML ```html -<ol class="normal">Liste 1 +Liste 1 +<ol class="normal"> <li>Coucou</li> <li>Monde</li> <li>Comment ça va ?</li> </ol> -<ol class="shortcut">Liste 2 +Liste 2 +<ol class="shortcut"> <li>On a</li> <li>le</li> <li>même</li> @@ -203,96 +232,348 @@ ol.shortcut { </ol> ``` -### Résultat +#### CSS + +```css +ol.normal { + list-style-type: upper-alpha; +} + +/* on peut aussi utiliser la propriété raccourcie */ +/* "list-style": */ +ol.shortcut { + list-style: upper-alpha; +} +``` + +#### Résultat -{{EmbedLiveSample("Exemples","200","300")}} +{{EmbedLiveSample('',"200","300")}} -## Accessibilité +### Tous les styles de liste + +#### HTML + +```html +<ol> + <li>Apollo</li> + <li>Hubble</li> + <li>Chandra</li> + <li>Cassini-Huygens</li> + <li>Spitzer</li> +</ol> + +<h2>Choisissez un style de liste :</h2> + +<div class="container"> + + <label for="disc"> + <input type="radio" id="disc" name="type" value="disc">disc + </label> + + <label for="circle"> + <input type="radio" id="circle" name="type" value="circle">circle + </label> + + <label for="square"> + <input type="radio" id="square" name="type" value="square">square + </label> + + <label for="decimal"> + <input type="radio" id="decimal" name="type" value="decimal">decimal + </label> + + <label for="cjk-decimal"> + <input type="radio" id="cjk-decimal" name="type" value="cjk-decimal">cjk-decimal + </label> + + <label for="decimal-leading-zero"> + <input type="radio" id="decimal-leading-zero" name="type" value="decimal-leading-zero">decimal-leading-zero + </label> + + <label for="lower-roman"> + <input type="radio" id="lower-roman" name="type" value="lower-roman">lower-roman + </label> + + <label for="upper-roman"> + <input type="radio" id="upper-roman" name="type" value="upper-roman">upper-roman + </label> + + <label for="lower-greek"> + <input type="radio" id="lower-greek" name="type" value="lower-greek">lower-greek + </label> + + <label for="lower-alpha"> + <input type="radio" id="lower-alpha" name="type" value="lower-alpha">lower-alpha, lower-latin + </label> + + <label for="upper-alpha"> + <input type="radio" id="upper-alpha" name="type" value="upper-alpha">upper-alpha, upper-latin + </label> + + <label for="arabic-indic"> + <input type="radio" id="arabic-indic" name="type" value="arabic-indic">arabic-indic + </label> + + <label for="armenian"> + <input type="radio" id="armenian" name="type" value="armenian">armenian + </label> + + <label for="bengali"> + <input type="radio" id="bengali" name="type" value="bengali">bengali + </label> + + <label for="cambodian"> + <input type="radio" id="cambodian" name="type" value="cambodian">cambodian + </label> + + <label for="cjk-earthly-branch"> + <input type="radio" id="cjk-earthly-branch" name="type" value="cjk-earthly-branch">cjk-earthly-branch + </label> -Le lecteur d'écran [VoiceOver](https://help.apple.com/voiceover/info/guide/) n'annonce pas, incorrectement, les listes non ordonnées lorsque `list-style-type:none` leur est appliqué. 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. + <label for="cjk-heavenly-stem"> + <input type="radio" id="cjk-heavenly-stem" name="type" value="cjk-heavenly-stem">cjk-heavenly-stem + </label> + + <label for="cjk-ideographic"> + <input type="radio" id="cjk-ideographic" name="type" value="cjk-ideographic">cjk-ideographic + </label> + + <label for="devanagari"> + <input type="radio" id="devanagari" name="type" value="devanagari">devanagari + </label> + + <label for="ethiopic-numeric"> + <input type="radio" id="ethiopic-numeric" name="type" value="ethiopic-numeric">ethiopic-numeric + </label> + + <label for="georgian"> + <input type="radio" id="georgian" name="type" value="georgian">georgian + </label> + + <label for="gujarati"> + <input type="radio" id="gujarati" name="type" value="gujarati">gujarati + </label> + + <label for="gurmukhi"> + <input type="radio" id="gurmukhi" name="type" value="gurmukhi">gurmukhi + </label> + + <label for="hebrew"> + <input type="radio" id="hebrew" name="type" value="hebrew">hebrew + </label> + + <label for="hiragana"> + <input type="radio" id="hiragana" name="type" value="hiragana">hiragana + </label> + + <label for="hiragana-iroha"> + <input type="radio" id="hiragana-iroha" name="type" value="hiragana-iroha">hiragana-iroha + </label> + + <label for="japanese-formal"> + <input type="radio" id="japanese-formal" name="type" value="japanese-formal">japanese-formal + </label> + + <label for="japanese-informal"> + <input type="radio" id="japanese-informal" name="type" value="japanese-informal">japanese-informal + </label> + + <label for="kannada"> + <input type="radio" id="kannada" name="type" value="kannada">kannada + </label> + + <label for="katakana"> + <input type="radio" id="katakana" name="type" value="katakana">katakana + </label> + + <label for="katakana-iroha"> + <input type="radio" id="katakana-iroha" name="type" value="katakana-iroha">katakana-iroha + </label> + + <label for="khmer"> + <input type="radio" id="khmer" name="type" value="khmer">khmer + </label> + + <label for="korean-hangul-formal"> + <input type="radio" id="korean-hangul-formal" name="type" value="korean-hangul-formal">korean-hangul-formal + </label> + + <label for="korean-hanja-formal"> + <input type="radio" id="korean-hanja-formal" name="type" value="korean-hanja-formal">korean-hanja-formal + </label> + + <label for="korean-hanja-informal"> + <input type="radio" id="korean-hanja-informal" name="type" value="korean-hanja-informal">korean-hanja-informal + </label> + + <label for="lao"> + <input type="radio" id="lao" name="type" value="lao">lao + </label> + + <label for="lower-armenian"> + <input type="radio" id="lower-armenian" name="type" value="lower-armenian">lower-armenian + </label> + + <label for="malayalam"> + <input type="radio" id="malayalam" name="type" value="malayalam">malayalam + </label> + + <label for="mongolian"> + <input type="radio" id="mongolian" name="type" value="mongolian">mongolian + </label> + + <label for="myanmar"> + <input type="radio" id="myanmar" name="type" value="myanmar">myanmar + </label> + + <label for="oriya"> + <input type="radio" id="oriya" name="type" value="oriya">oriya + </label> + + <label for="persian"> + <input type="radio" id="persian" name="type" value="persian">persian + </label> + + <label for="simp-chinese-formal"> + <input type="radio" id="simp-chinese-formal" name="type" value="simp-chinese-formal">simp-chinese-formal + </label> + + <label for="simp-chinese-informal"> + <input type="radio" id="simp-chinese-informal" name="type" value="simp-chinese-informal">simp-chinese-informal + </label> + + <label for="tamil"> + <input type="radio" id="tamil" name="type" value="tamil">tamil + </label> + + <label for="telegu"> + <input type="radio" id="telegu" name="type" value="telegu">telegu + </label> + + <label for="thai"> + <input type="radio" id="thai" name="type" value="thai">thai + </label> + + <label for="tibetan"> + <input type="radio" id="tibetan" name="type" value="tibetan">tibetan + </label> + + <label for="trad-chinese-formal"> + <input type="radio" id="trad-chinese-formal" name="type" value="trad-chinese-formal">trad-chinese-formal + </label> + + <label for="trad-chinese-informal"> + <input type="radio" id="trad-chinese-informal" name="type" value="trad-chinese-informal">trad-chinese-informal + </label> + + <label for="upper-armenian"> + <input type="radio" id="upper-armenian" name="type" value="upper-armenian">upper-armenian + </label> + + <label for="disclosure-open"> + <input type="radio" id="disclosure-open" name="type" value="disclosure-open">disclosure-open + </label> + + <label for="disclosure-closed"> + <input type="radio" id="disclosure-closed" name="type" value="disclosure-closed">disclosure-closed + </label> + + <label for="-moz-ethiopic-halehame"> + <input type="radio" id="-moz-ethiopic-halehame" name="type" value="-moz-ethiopic-halehame">-moz-ethiopic-halehame + </label> + + <label for="-moz-ethiopic-halehame-am"> + <input type="radio" id="-moz-ethiopic-halehame-am" name="type" value="-moz-ethiopic-halehame-am">-moz-ethiopic-halehame-am + </label> + + <label for="ethiopic-halehame-ti-er"> + <input type="radio" id="ethiopic-halehame-ti-er" name="type" value="ethiopic-halehame-ti-er">ethiopic-halehame-ti-er + </label> + + <label for="ethiopic-halehame-ti-et"> + <input type="radio" id="ethiopic-halehame-ti-et" name="type" value="ethiopic-halehame-ti-et">ethiopic-halehame-ti-et + </label> + + <label for="hangul"> + <input type="radio" id="hangul" name="type" value="hangul">hangul + </label> + + <label for="hangul-consonant"> + <input type="radio" id="hangul-consonant" name="type" value="hangul-consonant">hangul-consonant + </label> + + <label for="urdu"> + <input type="radio" id="urdu" name="type" value="urdu">urdu + </label> + + <label for="-moz-ethiopic-halehame-ti-er"> + <input type="radio" id="-moz-ethiopic-halehame-ti-er" name="type" value="-moz-ethiopic-halehame-ti-er">-moz-ethiopic-halehame-ti-er + </label> + + <label for="-moz-ethiopic-halehame-ti-et"> + <input type="radio" id="-moz-ethiopic-halehame-ti-et" name="type" value="-moz-ethiopic-halehame-ti-et">-moz-ethiopic-halehame-ti-et + </label> + + <label for="-moz-hangul"> + <input type="radio" id="-moz-hangul" name="type" value="-moz-hangul">-moz-hangul + </label> + + <label for="-moz-hangul-consonant"> + <input type="radio" id="-moz-hangul-consonant" name="type" value="-moz-hangul-consonant">-moz-hangul-consonant + </label> + + <label for="-moz-urdu"> + <input type="radio" id="-moz-urdu" name="type" value="-moz-urdu">-moz-urdu + </label> + +</div> +``` + +#### CSS ```css -ul { - list-style-type: none; +ol { + font-size: 1.2rem; } -ul li::before { - content: "\200B"; +.container { + column-count: 3; +} + +label { + display: block; +} + +input { + margin: .4rem; } ``` -- [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) +#### JavaScript -## Notes +```js +const container = document.querySelector(".container"); +container.addEventListener("change", event => { + const list = document.querySelector("ol"); + list.setAttribute("style", `list-style-type: ${event.target.value}`); +}); +``` -- Pour certains types, il est nécessaire d'avoir une police correspondante installée pour que l'affichage fonctionne. -- Pour des raisons historiques, `cjk-ideographic` est synonyme de `trad-chinese-informal`. +#### Résultat + +{{EmbedLiveSample("", "600", "850")}} ## Spécifications -<table class="standard-table"> - <thead> - <tr> - <th scope="col">Spécification</th> - <th scope="col">Statut</th> - <th scope="col">Commentaires</th> - </tr> - </thead> - <tbody> - <tr> - <td> - {{SpecName('CSS3 Counter Styles', '#extending-css2', 'list-style-type')}} - </td> - <td>{{Spec2("CSS3 Counter Styles")}}</td> - <td> - Les compteurs CSS2.1 sont redéfinis.<br />La syntaxe est étendue pour - prendre en charge les règles - <code>@counter-style</code>.<br />Définition des types : - <code>hebrew</code>, <code>cjk-ideographic</code>, - <code>hiragana</code>, <code>hiragana-iroha</code>, - <code>katakana</code>, <code>katakana-iroha</code>, - <code>japanese-formal</code>, <code>japanese-informal</code>, - <code>simp-chinese-formal</code>, <code>trad-chinese-formal</code>, - <code>simp-chinese-formal</code>, - <code>trad-chinese-formal</code>,<code>korean-hangul-formal</code>, - <code>korean-hanja-informal</code>, <code>korean-hanja-formal</code>, - <code>cjk-decimal</code>, <code>ethiopic-numeric</code>, - <code>disclosure-open</code> et - <code>disclosure-closed</code>.<br /><code><counter-style></code> - est étendu avec la notation fonctionnelle <code>symbols()</code>. - </td> - </tr> - <tr> - <td> - {{SpecName('CSS3 Lists', '#propdef-list-style-type', 'list-style-type')}} - </td> - <td>{{Spec2('CSS3 Lists')}}</td> - <td> - La syntaxe est modifiée pour prendre en charge les identifiants utilisés - avec les règles <code>@counter-style</code>.<br />Prise en charge du - type <code><string></code>. - </td> - </tr> - <tr> - <td> - {{SpecName('CSS2.1', 'generate.html#propdef-list-style-type', 'list-style-type')}} - </td> - <td>{{Spec2('CSS2.1')}}</td> - <td><p>Définition initiale.</p></td> - </tr> - </tbody> -</table> - -{{cssinfo}} +{{Specifications}} ## Compatibilité des navigateurs -{{Compat("css.properties.list-style-type")}} +{{Compat}} ## Voir aussi -- {{cssxref("list-style")}} -- {{cssxref("list-style-image")}} -- {{cssxref("list-style-position")}} +- [`list-style`](/fr/docs/Web/CSS/list-style) +- [`list-style-image`](/fr/docs/Web/CSS/list-style-image) +- [`list-style-position`](/fr/docs/Web/CSS/list-style-position) 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 |
