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
/* 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.
ul {
list-style: none;
}
ul li::before {
content: "\200B";
}
Une autre approche consiste à affecter une valeur url
à la propriété list-style
:
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 initiale | pour chaque propriété individuelle de la propriété raccourcie :
|
---|---|
Applicabilité | éléments de liste |
Héritée | oui |
Valeur calculée | pour chaque propriété individuelle de la propriété raccourcie :
|
Type d'animation | pour 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
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
.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