Fonction CSS `counter()`

Baseline Large disponibilité

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 CSS counter() retourne une chaîne de caractères représentant la valeur actuelle du compteur nommé, si celui-ci existe.

La fonction counter() est généralement utilisée au sein d'un pseudo-élément avec la propriété content, mais théoriquement, elle peut être utilisée partout où une valeur <string> est acceptée.

Exemple interactif

.double-list {
  counter-reset: count -1;
}

.double-list li {
  counter-increment: count 2;
}

.double-list li::marker {
  content: counter(count, decimal) ") ";
}

<p>Meilleurs duos dynamiques dans le sport&nbsp;:</p>
<ol class="double-list">
  <li>Simone Biles + Jonathan Owens</li>
  <li>Serena Williams + Venus Williams</li>
  <li>Aaron Judge + Giancarlo Stanton</li>
  <li>LeBron James + Dwyane Wade</li>
  <li>Xavi Hernandez + Andres Iniesta</li>
</ol>

Syntaxe

css

/* Usage simple */
counter(nomcompteur);

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

Un compteur CSS n'a aucun effet visible en lui-même. Les fonctions counter() et counters() sont ce qui rend les compteurs utiles en retournant des chaînes de caractères définies par le·la développeur·euse (ou des images).

Valeurs

La fonction counter() accepte jusqu'à deux paramètres. Le premier paramètre est le <counter-name>. Le deuxième paramètre optionnel est le <counter-style>.

<counter-name>: Un identifiant personnalisé (<custom-ident>) qui identifie le compteur, et qui est le même nom sensible à la casse utilisé avec les valeurs de propriété counter-reset et counter-increment. Le nom du compteur ne peut pas commencer par deux tirets et ne peut pas être none, unset, initial ou inherit.
<counter-style>: Un nom de <list-style-type>, un nom de <@counter-style> ou une fonction symbols(), où un nom de style de compteur peut être un style de compteur prédéfini numeric, alphabetic ou symbolic, un style de compteur prédéfini complexe en écriture asiatique ou éthiopienne, ou un autre style de compteur prédéfini. Si omis, le style de compteur par défaut est decimal.

Note : Pour joindre les valeurs de compteur lors de l'imbrication de compteurs, utilisez la fonction counters(), qui fournit un paramètre <string> supplémentaire.

Syntaxe formelle

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

<counter-name> = 
  <custom-ident>  

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

<counter-style-name> = 
  <custom-ident>  

<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

`lower-roman` comparé à `lower-alpha`

Dans cet exemple, nous affichons un compteur en utilisant les styles de liste lower-roman et lower-alpha.

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, lower-roman) "] == ["
    counter(count, lower-alpha) "]";
}

Résultat

Afficher un compteur en utilisant trois styles

Dans cet exemple, nous utilisons la fonction counter() trois fois.

HTML

html

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

CSS

Nous incluons la fonction counter() avec trois styles de compteur différents, y compris la valeur décimale par défaut. Nous avons ajouté un padding à la liste pour fournir de l'espace pour la longue chaîne de caractères dans ::marker.

css

ol {
  counter-reset: listCounter;
  padding-left: 8em;
}
li {
  counter-increment: listCounter;
}
li::marker {
  content:
    "L'élément #" counter(listCounter) " est : ";
}
li::after {
  content:
    "[" counter(listCounter, decimal-leading-zero) "] == ["
    counter(listCounter, upper-roman) "]";
}