La propriété list-style-type
permet de définir l'apparence d'un élément de liste. Généralement, celle-ci s'applique à l'élément <li>
car il est le seul dont la propriété display
vaut list-item
par défaut. Toutefois, en utilisant cette valeur pour display
sur d'autres éléments, on pourrait appliquer cette propriété.
Le code source de cet exemple interactif est disponible dans un dépôt GitHub. Si vous souhaitez contribuez à ces exemples, n'hésitez pas à cloner https://github.com/mdn/interactive-examples et à envoyer une pull request !
La couleur 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>
et <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>
ou <ul>
) afin qu'elle s'applique à l'ensemble des éléments fils.
Syntaxe
/* Liste partielle des mots-clés utilisables */ list-style-type: disc; list-style-type: circle; list-style-type: square; list-style-type: decimal; list-style-type: georgian; list-style-type: cjk-ideographic; list-style-type: kannada; /* Une chaîne de caractères */ /* Type <string> */ list-style-type: '-'; /* Un identifiant correspondant à */ /* une règle @counter-style */ list-style-type: custom-counter-style; /* Valeur avec un mot-clé */ list-style-type: none; /* Valeurs globales */ list-style-type: inherit; list-style-type: initial; list-style-type: unset;
La propriété list-style-type
peut être définie grâce à :
- une valeur
<custom-ident>
- une valeur
symbols()
- une valeur
<string>
- au mot-clé
none
Valeurs
symbols()
- Définit un style de puce utilisé.
none
- Aucun marqueur n'est affiché.
<string>
- La chaîne de caractères indiquée sera utilisée comme puce
<custom-ident>
- Un identifiant correspondant à la valeur d'un
@counter-style
ou à un style prédéfini :
disc
-
- Un disque plein (la valeur par défaut)
circle
-
- Un cercle vide
square
-
- Un carré plein
decimal
-
- Des nombres en base 10
- Commençant par 1
cjk-decimal
-
- Nombres décimaux Han
- E.g. 一, 二, 三, ..., 九八, 九九, 一〇〇
decimal-leading-zero
-
- Nombres en base 10
- Avec des 0 devant
- E.g. 01, 02, 03, … 98, 99
lower-roman
-
- Nombres romains minuscules
- Par exemple i, ii, iii, iv, v…
upper-roman
-
- Nombres romains en majuscules
- Par exemple I, II, III, IV, V…
lower-greek
-
- Lettres grecques minuscules
- alpha, beta, gamma…
- Par exemple α, β, γ…
lower-alpha
lower-latin
-
- Lettres ASCII en minuscules
- Par exemple a, b, c, … z
lower-latin
n'est pas pris en charge par les versions avant IE7- Voir le tableau de compatibilité
upper-alpha
upper-latin
-
- Lettres ASCII en majuscules
- Par exemple A, B, C, … Z
upper-latin
n'est pas pris en charge par les versions avant IE7
arabic-indic
-moz-arabic-indic
-
- Exemple
armenian
-
- Système de numérotation arménien
- (ayb/ayp, ben/pen, gim/keem…
bengali
-moz-bengali
-
- Exemple
cambodian
*-
- Exemple
- est un synonyme pour
khmer
cjk-earthly-branch
-moz-cjk-earthly-branch
-
- Exemple
cjk-heavenly-stem
-moz-cjk-heavenly-stem
-
- Exemple
cjk-ideographic
-
- Identique à
trad-chinese-informal
- E.g. 一萬一千一百一十一
- Identique à
devanagari
-moz-devanagari
-
- Exemple
ethiopic-numeric
-
- Exemple
georgian
-
- Système de numérotation géorgien
- Par exemple an, ban, gan, … he, tan, in…
gujarati
-moz-gujarati
-
- Exemple
gurmukhi
-moz-gurmukhi
-
- Exemple
hebrew
-
- Système de numérotation hébreux
hiragana
-
- a, i, u, e, o, ka, ki, …
- (Japonais)
hiragana-iroha
-
- i, ro, ha, ni, ho, he, to, …
- Iroha est l'ancien ordre japonais pour les syllabes.
japanese-formal
-
- Système de numérotation japonais formel utilisé pour les documents légaux ou financiers.
- E.g., 壱萬壱阡壱百壱拾壱
- Ces kanjis ont été conçus afin de ne pas pouvoir être confondus avec d'autres
japanese-informal
-
- Système de numérotation japonais informel
kannada
-moz-kannada
-
- Exemple
katakana
-
- A, I, U, E, O, KA, KI, …
- (Japonais)
katakana-iroha
-
- I, RO, HA, NI, HO, HE, TO, …
- Iroha correspond à l'ancien ordre japonais pour les syllabes.
khmer
-moz-khmer
-
- Exemple
korean-hangul-formal
-
- Système de numérotation coréen hangul .
- E.g., 일만 일천일백일십일
korean-hanja-formal
-
- Système de numérotation formel coréen Han.
- E.g. 壹萬 壹仟壹百壹拾壹
korean-hanja-informal
-
- Système de numérotation coréen hanja numbering.
- E.g., 萬 一千百十一
lao
-moz-lao
-
- Exemple
lower-armenian
*-
- Exemple
malayalam
-moz-malayalam
-
- Exemple
mongolian
-
- Exemple
myanmar
-moz-myanmar
-
- Exemple
oriya
-moz-oriya
-
- Exemple
persian
-moz-persian
-
- Exemple
simp-chinese-formal
-
- Système de numérotation formel chinois simplifié.
- E.g. 壹万壹仟壹佰壹拾壹
simp-chinese-informal
-
- Système de numérotation informel chinois simplifié.
- E.g. 一万一千一百一十一
tamil
-moz-tamil
-
- Exemple
telugu
-moz-telugu
-
- Exemple
thai
-moz-thai
-
- Exemple
tibetan
*-
- Exemple
trad-chinese-formal
-
- Système de numérotation formel chinois traditionnel.
- E.g. 壹萬壹仟壹佰壹拾壹
trad-chinese-informal
-
- Système de numérotation informel chinois traditionnel.
- E.g. 一萬一千一百一十一
upper-armenian
*-
- Exemple
disclosure-open
-
- Symbole indiquant qu'un widget (comme
<details>
) est ouvert.
- Symbole indiquant qu'un widget (comme
disclosure-closed
-
- Symbole indiquant qu'un widget (comme
<details>
) est fermé.
- Symbole indiquant qu'un widget (comme
Extensions non-standards
D'autres types sont fournis par Gecko (Firefox), Blink (Chrome and Opera) and WebKit (Safari) mais ne sont pas standards. Pour voir les différents navigateurs les supportant, se référer au tableau de compatibilité en bas de page.
-moz-ethiopic-halehame
-
- Exemple
-moz-ethiopic-halehame-am
-
- Exemple
ethiopic-halehame-ti-er
-moz-ethiopic-halehame-ti-er
-
- Exemple
ethiopic-halehame-ti-et
-moz-ethiopic-halehame-ti-et
-
- Exemple
hangul
-moz-hangul
-
- Exemple
- Exemple
- Exemple
hangul-consonant
-moz-hangul-consonant
-
- Exemple
- Exemple
- Exemple
urdu
-moz-urdu
-
- Exemple
Syntaxe formelle
<counter-style> | <string> | noneoù
<counter-style> = <counter-style-name> | symbols()
où
<counter-style-name> = <custom-ident>
Exemples
CSS
ol.normal { list-style-type: upper-alpha; } /* on peut aussi utiliser la propriété raccourcie */ /* "list-style": */ ol.shortcut { list-style: upper-alpha; }
HTML
<ol class="normal">Liste 1 <li>Coucou</li> <li>Monde</li> <li>Comment ça va ?</li> </ol> <ol class="shortcut">Liste 2 <li>On a</li> <li>le</li> <li>même</li> <li>résultat</li> </ol>
Résultat
Accessibilité
Le lecteur d'écran VoiceOver n'annonce pas, incorrectement, les listes non ordonnées lorsque list-style-type:none
leur est appliqué. Pour palier à ce problème, 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-type: none; } ul li::before { content: "\200B"; }
- VoiceOver et
list-style-type: none
– Unfettered Thoughts (en anglais) - Comprendre les règles WCAG 1.3
- Understanding Success Criterion 1.3.1, W3C Understanding WCAG 2.0 (en anglais)
Notes
- 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 detrad-chinese-informal
.
Spécifications
Spécification | Statut | Commentaires |
---|---|---|
CSS Counter Styles Level 3 La définition de 'list-style-type' dans cette spécification. |
Candidat au statut de recommandation | Les compteurs CSS2.1 sont redéfinis. La syntaxe est étendue pour prendre en charge les règles @counter-style .Définition des types : hebrew , cjk-ideographic , hiragana , hiragana-iroha , katakana , katakana-iroha , japanese-formal , japanese-informal , simp-chinese-formal , trad-chinese-formal , simp-chinese-formal , trad-chinese-formal ,korean-hangul-formal , korean-hanja-informal , korean-hanja-formal , cjk-decimal , ethiopic-numeric , disclosure-open et disclosure-closed .<counter-style> est étendu avec la notation fonctionnelle symbols() . |
CSS Lists Module Level 3 La définition de 'list-style-type' dans cette spécification. |
Version de travail | La syntaxe est modifiée pour prendre en charge les identifiants utilisés avec les règles @counter-style .Prise en charge du type <string> . |
CSS Level 2 (Revision 1) La définition de 'list-style-type' dans cette spécification. |
Recommendation |
Définition initiale. |
Valeur initiale | disc |
---|---|
Applicabilité | éléments de liste |
Héritée | oui |
Média | visuel |
Valeur calculée | comme spécifié |
Type d'animation | discrète |
Ordre canonique | l'ordre unique et non-ambigu défini par la grammaire formelle |
Compatibilité des navigateurs
Fonctionnalité | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|---|
Support simple | 1 | 12 | 1 | 4 | 3.5 | 1 |
arabic-indic | Non | Non | ? | Non | Non | Non |
armenian | 1 | 12 | 1 | 8 | 6 | 1 |
bengali | Non | Non | ? | Non | Non | Non |
cjk-decimal | Non | Non | 28 | Non | Non | Non |
cjk-earthly-branch | Non | Non | ? | Non | Non | Non |
cjk-heavenly-stem | Non | Non | ? | Non | Non | Non |
cjk-ideographic | 1 | Non | 1 | Non | 15 71 | ? |
decimal-leading-zero | 1 | 12 | 1 | 8 | 8 | 1 |
devanagari | Non | Non | ? | Non | Non | Non |
disclosure-closed | Non | Non | 33 | Non | Non | Non |
disclosure-open | Non | Non | 33 | Non | Non | Non |
ethiopic-numeric | Non | Non | ? | Non | Non | Non |
georgian | 1 | 12 | 1 | 8 | 6 | 1 |
gujarati | Non | Non | ? | Non | Non | Non |
gurmukhi | Non | Non | ? | Non | Non | Non |
hebrew | 1 | Non | 1 | Non | 15 71 | ? |
hiragana | 1 | Non | 1 | Non | 15 71 | ? |
hiragana-iroha | 1 | Non | 1 | Non | 15 71 | ? |
japanese-formal | Non | Non | 28 1 -moz- | Non | Non | Non |
japanese-informal | Non | Non | 28 1 -moz- | Non | Non | Non |
kannada | Non | Non | ? | Non | Non | Non |
katakana | 1 | Non | 1 | Non | 15 71 | ? |
katakana-iroha | 1 | Non | 1 | Non | 15 71 | ? |
khmer | Non | Non | ? | Non | Non | Non |
korean-hangul-formal | Non | Non | 28 | Non | Non | Non |
korean-hanja-formal | Non | Non | 28 | Non | Non | Non |
korean-hanja-informal | Non | Non | 28 | Non | Non | Non |
lao | Non | Non | ? | Non | Non | Non |
lower-greek | 1 | 12 | 1 | 8 | 6 | 1 |
lower-latin | 1 | 12 | 1 | 8 | 6 | 1 |
malayalam | Non | Non | ? | Non | Non | Non |
mongolian | Non | Non | 33 | Non | Non | Non |
myanmar | Non | Non | ? | Non | Non | Non |
oriya | Non | Non | ? | Non | Non | Non |
persian | Non | Non | ? | Non | Non | Non |
simp-chinese-formal | Non | Non | 28 1 -moz- | Non | Non | Non |
simp-chinese-informal | Non | Non | 28 1 -moz- | Non | Non | Non |
tamil | Non | Non | ? | Non | Non | Non |
telugu | Non | Non | ? | Non | Non | Non |
thai | Non | Non | ? | Non | Non | Non |
trad-chinese-formal | Non | Non | 28 1 -moz- | Non | Non | Non |
trad-chinese-informal | Non | Non | 28 1 -moz- | Non | Non | Non |
upper-latin | 1 | 12 | 1 | 8 | 6 | 1 |
<string> | Non | Non | 39 | Non | Non | Non |
symbols | Non | ? | 35 | Non | Non | Non |
Fonctionnalité | Android webview | Chrome for Android | Edge mobile | Firefox for Android | Opera Android | iOS Safari | Samsung Internet |
---|---|---|---|---|---|---|---|
Support simple | Oui | Oui | 12 | 4 | Oui | Oui | Oui |
arabic-indic | ? | ? | ? | 33 4 -moz- | ? | ? | Non |
armenian | ? | Oui | Oui | 4 | Oui | Oui | Oui |
bengali | ? | ? | ? | 33 4 -moz- | ? | ? | Non |
cjk-decimal | ? | ? | ? | ? | ? | ? | Non |
cjk-earthly-branch | ? | ? | ? | 33 4 -moz- | ? | ? | Non |
cjk-heavenly-stem | ? | ? | ? | 33 4 -moz- | ? | ? | Non |
cjk-ideographic | ? | ? | ? | ? | ? | ? | ? |
decimal-leading-zero | ? | ? | ? | ? | ? | ? | ? |
devanagari | ? | ? | ? | 33 4 -moz- | ? | ? | Non |
disclosure-closed | ? | ? | ? | ? | ? | ? | Non |
disclosure-open | ? | ? | ? | ? | ? | ? | Non |
ethiopic-numeric | ? | ? | ? | 332 4 -moz- | ? | ? | Non |
georgian | ? | Oui | Oui | 4 | Oui | Oui | Oui |
gujarati | ? | ? | ? | 33 4 -moz- | ? | ? | Non |
gurmukhi | ? | ? | ? | 33 4 -moz- | ? | ? | Non |
hebrew | ? | ? | ? | ? | ? | ? | ? |
hiragana | ? | ? | ? | ? | ? | ? | ? |
hiragana-iroha | ? | ? | ? | ? | ? | ? | ? |
japanese-formal | ? | ? | ? | ? | ? | ? | Non |
japanese-informal | ? | ? | ? | ? | ? | ? | Non |
kannada | ? | ? | ? | 33 4 -moz- | ? | ? | Non |
katakana | ? | ? | ? | ? | ? | ? | ? |
katakana-iroha | ? | ? | ? | ? | ? | ? | ? |
khmer | ? | ? | ? | 33 4 -moz- | ? | ? | Non |
korean-hangul-formal | ? | ? | ? | ? | ? | ? | Non |
korean-hanja-formal | ? | ? | ? | ? | ? | ? | Non |
korean-hanja-informal | ? | ? | ? | ? | ? | ? | Non |
lao | ? | ? | ? | 33 4 -moz- | ? | ? | Non |
lower-greek | ? | Oui | Oui | 4 | Oui | Oui | Oui |
lower-latin | ? | Oui | Oui | 4 | Oui | Oui | Oui |
malayalam | ? | ? | ? | 33 4 -moz- | ? | ? | Non |
mongolian | ? | ? | ? | ? | ? | ? | Non |
myanmar | ? | ? | ? | 33 4 -moz- | ? | ? | Non |
oriya | ? | ? | ? | 33 4 -moz- | ? | ? | Non |
persian | ? | ? | ? | 33 4 -moz- | ? | ? | Non |
simp-chinese-formal | ? | ? | ? | ? | ? | ? | Non |
simp-chinese-informal | ? | ? | ? | ? | ? | ? | Non |
tamil | ? | ? | ? | 33 4 -moz- | ? | ? | Non |
telugu | ? | ? | ? | 33 4 -moz- | ? | ? | Non |
thai | ? | ? | ? | 33 4 -moz- | ? | ? | Non |
trad-chinese-formal | ? | ? | ? | ? | ? | ? | Non |
trad-chinese-informal | ? | ? | ? | ? | ? | ? | Non |
upper-latin | ? | Oui | Oui | 4 | Oui | Oui | Oui |
<string> | ? | ? | ? | ? | ? | ? | Non |
symbols | Non | Non | ? | 35 | Non | Non | Non |
1. Until version 15, only decimal numbers display.
2. Before Firefox 38, Firefox added a dot as suffix of the number for ethiopic-numeric
(for example, ፫. instead of ፫). The specification later defined the absence of a suffix, which Firefox 38 followed.