counters()

La fonction CSS counters() permet d'obtenir des compteurs imbriqués en renvoyant la concaténation des chaînes de caractères des valeurs des compteurs passés en arguments. La fonction counters() peut s'utiliser sous deux formes :

  • counters(name, string)
  • counters(name, string, style)

Cette fonction est généralement utilisée sur des pseudo-éléments mais peut théoriquement être utilisée à tout endroit où une valeur <string> est attendue. Le texte généré est la concaténation des compteurs en commençant par les compteurs « parents » puis en ajoutant la valeurs des compteurs « fils ». Les compteurs sont affichés avec le style indiqué (par défaut, ce sera decimal).

/* Utilisation simple - style decimal par défaut */
counters(countername, '-');

/* Changement du style d'affichage */
counters(countername, '.', upper-roman)

Un compteur n'est pas visible en tant que tel. Les fonctions counters() et counter() doivent être utilisées pour créer du contenu.

Note : Bien que la fonction counters() puisse être utilisée avec n'importe quelle propriété CSS, la prise en charge des propriétés autres que content reste experimentale.

Avant d'utiliser cette fonctionnalité en production, référez vous au tableau de compatibilité ci-après.

Syntaxe

Valeurs

<custom-ident>
Un nom identifiant les compteurs à utiliser. C'est le même nom qui pourra être utilisé avec les propriétés counter-reset et counter-increment. Le nom ne peut pas commencer par deux tirets et ne peut pas être none, unset, initial ou inherit.
<counter-style>
Un style de compteur (cf. les valeurs décrites pour list-style-type) ou une fonction symbols(). En absence de valeur, le style utilisé sera decimal.
<string>
Une suite de caractères. Les caractères qui ne sont pas latins doivent être encodés avec leur séquence d'échappement Unicode. \000A9 représentera par exemple le symbole copyright (©).
none
Représente la chaîne vide.

Syntaxe formelle

counters( <custom-ident>, <string>, <counter-style>? )


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


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

Exemples

Style par défaut et chiffres romains

HTML

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

CSS

ol {
  counter-reset: listCounter;
}
li {
  counter-increment: listCounter;
}
li::marker {
   content:  counters(listCounter, '.', upper-roman) ') ';
}
li::before {
  content:  counters(listCounter, ".") " == " counters(listCounter, ".", lower-roman) ;
}

Résultat

Numérotation décimale (avec zéro) et indices alphabétiques

HTML

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

CSS

ol {
  counter-reset: count;
}
li {
  counter-increment: count;
}
li::marker { 
   content: counters(count, '.', upper-alpha) ') '; 
}
li::before {
  content: counters(count, ".", decimal-leading-zero) " == " counters(count, ".", lower-alpha);
}

Résultat

Spécifications

Spécification État Commentaires
CSS Lists Module Level 3
La définition de 'CSS Counters' dans cette spécification.
Version de travail Aucune modification.
CSS Level 2 (Revision 1)
La définition de 'CSS Counters' dans cette spécification.
Recommendation Définition initiale.

Compatibilité des navigateurs

Update compatibility data on GitHub
OrdinateurMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariWebview AndroidChrome pour AndroidFirefox pour AndroidOpera pour AndroidSafari sur iOSSamsung Internet
counters()Chrome Support complet 1Edge Support complet 12Firefox Support complet 1.5IE Support complet 8Opera Support complet 10Safari Support complet 3WebView Android Support complet 1Chrome Android Support complet 18Firefox Android Support complet 4Opera Android Support complet 10.1Safari iOS Support complet 1Samsung Internet Android Support complet 1.0

Légende

Support complet  
Support complet

Voir aussi