Cette page a été traduite à partir de l'anglais par la communauté.Vous pouvez contribuer en rejoignant la communauté francophone sur MDN Web Docs.
list-style
Baseline Widely available *
Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis juillet 2015.
* Certaines parties de cette fonctionnalité peuvent bénéficier de prise en charge variables.
La propriétélist-style est unepropriété raccourcie qui permet de définirlist-style-type,list-style-image etlist-style-position.
Exemple interactif
list-style: square;list-style: inside;list-style: url("/shared-assets/images/examples/rocket.svg");list-style: none;list-style: georgian inside url("/shared-assets/images/examples/rocket.svg");list-style: georgian outside url("/non-existent.svg");<section> <div> <p>NASA Notable Missions</p> <ul> <li>Apollo</li> <li>Hubble</li> <li>Chandra</li> <li>Cassini-Huygens</li> <li>Spitzer</li> </ul> </div></section>.default-example { font-size: 1.2rem;}#example-element { width: 100%; background: #be094b; color: white;}section { text-align: left; flex-direction: column;}hr { width: 50%; color: lightgray; margin: 0.5em;}.note { font-size: 0.8rem;}.note a { color: #009e5f;}@counter-style space-counter { symbols: "\1F680" "\1F6F8" "\1F6F0" "\1F52D"; suffix: " ";}Note :Cette propriété s'applique aux éléments d'une liste (c'est-à-dire aux éléments pour lesquelsdisplay vautlist-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. Silist-style-type etlist-style-image sont tous les deux définis,list-style-type sera utilisé si l'image est indisponible.
Valeurs
list-style-typeVoir
list-style-type.list-style-imageVoir
list-style-image.list-style-positionVoir
list-style-position.noneAucun style n'est utilisé.
Accessibilité
Safari ne reconnait pas les listes non ordonnées lorsquelist-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'affecterrole="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 unespace sans chasse commepseudo-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 valeururl à 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>|
<image()>|
<image-set()>|
<cross-fade()>|
<element()>|
<gradient>
<counter-style> =
<counter-style-name>|
<symbols()>
<image()> =
image(<image-tags>?[<image-src>? ,<color>?]!)
<image-set()> =
image-set(<image-set-option>#)
<cross-fade()> =
cross-fade(<cf-image>#)
<element()> =
element(<id-selector>)
<symbols()> =
symbols(<symbols-type>?[<string>|<image>]+)
<image-tags> =
ltr|
rtl
<image-src> =
<url>|
<string>
<image-set-option> =
[<image>|<string>][<resolution>||type(<string>)]?
<cf-image> =
[<image>|<color>]&&
<percentage [0,100]>?
<id-selector> =
<hash-token>
<symbols-type> =
cyclic|
numeric|
alphabetic|
symbolic|
fixed
Exemples
Définition de list-style-type et position
HTML
Liste 1<ul> <li>Élément 1</li> <li>Élément 2</li> <li>Élément 3</li></ul>Liste 2<ul> <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 |