counter()

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

La fonction CSScounter() renvoie une chaîne de caractères qui représente la valeur courante du compteur nommé (dont le nom est passé en argument). Elle est généralement utilisée pour construire unpseudo-élément mais elle peut tout à fait être utilisée à n'importe quel endroit où une valeur<string> est attendue.

css

/* Usage simple */counter(nomcompteur);/* Modifier le type d'affichage du compteur */counter(nomcompteur, upper-roman)

Uncompteur CSS n'a aucun effet visible en lui-même. C'est la fonctioncounter() (ainsi quecounters()) qui permet d'utiliser la chaîne de caractère ou l'image résultante.

Note :La fonctioncounter() peut être utilisée avec n'importe quelle propriété CSS mais la prise en charge des propriétés autres quecontent reste expérimentale et la prise en charge du paramètre « type ou unité » est hétérogène.

Veillez à consulterle tableau de compatibilité des navigateurs avant d'utiliser ces fonctionnalités en production.

Syntaxe

Valeurs

<custom-ident>: Un nom identifiant le compteur (sensible à la casse). C'est le même nom qui pourra être utilisé aveccounter-reset etcounter-increment. Le nom ne peut pas commencer avec deux tirets et ne peut pas être l'un des mots-clésnone,unset,initial ouinherit.
<counter-style>: Un nom de style de compteur ou une fonctionsymbols(). Le nom d'un style de compteur peut indiquer un compteuralphabétique, numérique, symbolique ou encore utilisant un système de numération asiatique ou éthiopien ou un autrestyle de compteur prédéfini. Si cette valeur n'est pas fournie, le style par défaut est décimal.
none: Représente la chaîne de caractère vide.

Syntaxe formelle

<counter()> =
counter(<counter-name> ,<counter-style>?)

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

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

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

<image> =
<url>|
<image()>|
<image-set()>|
<cross-fade()>|
<element()>|
<gradient>

<image()> =
image(<image-tags>?[<image-src>? ,<color>?]!)

<image-set()> =
image-set(<image-set-option>#)

<cross-fade()> =
cross-fade(<cf-image>#)

<element()> =
element(<id-selector>)

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

Exemples

Comparaison entre compteur par défaut et chiffres romains majuscules

HTML

html

<ol>  <li></li>  <li></li>  <li></li></ol>

CSS

css

ol {  counter-reset: listCounter;}li {  counter-increment: listCounter;}li::after {  content: "[" counter(listCounter) "] == [" counter(listCounter, upper-roman)    "]";}

Résultat

Comparaison entre compteur décimal avec zéro et compteur alphabétique minuscule

HTML

html

<ol>  <li></li>  <li></li>  <li></li></ol>

CSS

css

ol {  counter-reset: count;}li {  counter-increment: count;}li::after {  content: "[" counter(count, decimal-leading-zero) "] == ["    counter(count, lower-alpha) "]";}