list-style
==========

La propriété **`list-style`** est une propriété raccourcie qui permet de définir `list-style-type`, `list-style-image` et `list-style-position`.

Exemple interactif
------------------

**Note :** Cette propriété s'applique aux éléments d'une liste (c'est-à-dire aux éléments pour lesquels `display` vaut `list-item`). Par défaut, cela inclut les éléments `<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>` ou à `<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`
* `list-style-position`
* `list-style-type`
Syntaxe
-------


```css
/\* Type \*/
list-style: square;

/\* Image \*/
list-style: url("../img/etoile.png");

/\* Position \*/
list-style: inside;

/\* type | position \*/
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;
```


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

### Valeurs

`list-style-type`

Voir `list-style-type`.

`list-style-image`

Voir `list-style-image`.

`list-style-position`

Voir `list-style-position`.

`none`

Aucun style n'est utilisé.

Accessibilité
-------------

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).

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.

Pour pallier ce problème en utilisant uniquement les styles CSS, on peut ajouter un espace sans chasse comme pseudo-contenu avant chaque élément de liste afin que la liste soit correctement annoncée.


```css
ul {
  list-style: none;
}

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");
}
```


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)
* *VoiceOver and* `list-style-type: none` – *Unfettered Thoughts* (en anglais)
* MDN Comprendre les règles WCAG 1.3
* *Understanding Success Criterion 1.3.1 | W3C Understanding WCAG 2.0* (en anglais)
Définition formelle
-------------------

|  |  |
| --- | --- |
| Valeur initiale | pour chaque propriété individuelle de la propriété raccourcie :* `list-style-type`: `disc`
* `list-style-position`: `outside`
* `list-style-image`: `none`
 |
| Applicabilité | éléments de liste |
| Héritée | oui |
| Valeur calculée | pour chaque propriété individuelle de la propriété raccourcie :* `list-style-image`: The keyword `none` or the computed <image>
* `list-style-position`: comme spécifié
* `list-style-type`: comme spécifié
 |
| Type d'animation | pour chaque propriété individuelle de la propriété raccourcie :* `list-style-image`: discrète
* `list-style-position`: discrète
* `list-style-type`: discrète
 |

Syntaxe formelle
----------------
```

list-style =   
  <'list-style-position'>  ||  
  <'list-style-image'>     ||  
  <'list-style-type'>        
  
```

Exemples
--------

### Définition de list-style-type et position

#### HTML


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


#### CSS


```css
.un {
  list-style: circle;
}

.deux {
  list-style: square inside;
}
```


#### Résultat

Spécifications
--------------

| Specification |
| --- |
| CSS Lists and Counters Module Level 3 # list-style-property |

Compatibilité des navigateurs
-----------------------------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

Voir aussi
----------

* `list-style-type`
* `list-style-image`
* `list-style-position`