list-style

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

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 :

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.

Définition formelle

Valeur initialepour chaque propriété individuelle de la propriété raccourcie :
Applicabilitééléments de liste
Héritéeoui
Valeur calculéepour chaque propriété individuelle de la propriété raccourcie :
Type d'animationpour chaque propriété individuelle de la propriété raccourcie :

Syntaxe formelle

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

<list-style-position> = 
  inside   |
  outside  

<list-style-image> = 
  <image>  |
  none     

<list-style-type> = 
  <counter-style>  |
  <string>         |
  none             

<image> = 
  <url>       |
  <gradient>  

<counter-style> = 
  <counter-style-name>  |
  <symbols()>           

<url> = 
  <url()>  |
  <src()>  

<symbols()> = 
  symbols( <symbols-type>? [ <string> | <image> ]+ )  

<url()> = 
  url( <string> <url-modifier>* )  |
  <url-token>                      

<src()> = 
  src( <string> <url-modifier>* )  

<symbols-type> = 
  cyclic      |
  numeric     |
  alphabetic  |
  symbolic    |
  fixed

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

Voir aussi