Compteurs CSS

Les compteurs CSS sont des variables dont les valeurs sont incrémentées par les règles CSS et qui permettent de savoir combien de fois elles sont utilisées. Cela permet par exemple d'adapter la mise en forme du contenu en fonction de son emplacement dans le document.

La valeur d'un compteur peut être manipulée grâce aux propriétés counter-reset. counter-increment et on peut les afficher sur la page grâce aux fonctions counter() et counters() dans la propriété content.

Utiliser les compteurs

Manipuler la valeur d'un compteur

Pour utiliser un compteur CSS, il faut d'abord réinitialiser sa valeur (0 par défaut) à l'aide de counter-reset. Pour incrémenter un compteur initialisé, on peut utiliser counter-increment. Attention le nom du compteur ne peut pas être none, inherit ou initial.

Afficher un compteur

Pour ajouter un compteur au contenu d'un élément, il faut utiliser la fonction counter() ou counters() dans une propriété content.

La fonction counter() prend deux formes : counter(nom) ou counter(nom, style). Le texte ainsi généré est celui du compteur le plus proche avec ce nom. Le contenu est mis en forme avec le style indiqué (par défaut, c'est decimal).

La fonction counters() prend également deux formes : counters(nom, chaine) ou counters(nom, chaine style). Le texte généré aura la valeur de l'ensemble des compteurs présents dans la portée du pseudo-élément (du plus loin au plus proche), séparés par la chaîne de caractères passée en argument. Les compteurs sont mis en forme avec le style indiqué (par défaut, c'est decimal).

Exemple simple

Dans l'exemple qui suit, la feuille de style CSS préfixe chaque titre de niveau 3 avec « Section <la valeur du compteur> : ».

Note : La fonction counter() et la fonction counters() peuvent toutes les deux prendre un dernier argument qui correspond au style de liste utilisé (par défaut, c'est decimal).

CSS

css
body {
  counter-reset: section; /* On initialise le compteur à 0 */
}

h3::before {
  counter-increment: section; /* On incrémente le compteur section */
  content: "Section " counter(section) " : "; /* On affiche le compteur */
}

HTML

html
<h3>Introduction</h3>
<h3>Corps</h3>
<h3>Conclusion</h3>

Résultat

Imbriquer des compteurs

Un compteur CSS est particulièrement utile lorsqu'il s'agit de gérer les listes générées dynamiquement. En utilisant la fonction counters(), on peut insérer une chaîne de caractères entre les différents niveaux des compteurs imbriqués.

CSS

css
ol {
  counter-reset: section; /* On crée une nouvelle instance du
                                            compteur section avec chaque ol */
  list-style-type: none;
}

li::before {
  counter-increment: section; /* On incrémente uniquement cette
                                            instance du compteur */
  content: counters(section, ".") " "; /* On ajoute la valeur de toutes les
                                            instances séparées par ".". */
  /* Si on doit supporter < IE8 il faudra
                                            faire attention à ce qu'il n'y ait
                                            aucun blanc après ',' */
}

HTML

html
<ol>
  <li>item</li>          <!-- 1     -->
  <li>item               <!-- 2     -->
    <ol>
      <li>item</li>      <!-- 2.1   -->
      <li>item</li>      <!-- 2.2   -->
      <li>item           <!-- 2.3   -->
        <ol>
          <li>item</li>  <!-- 2.3.1 -->
          <li>item</li>  <!-- 2.3.2 -->
        </ol>
        <ol>
          <li>item</li>  <!-- 2.3.1 -->
          <li>item</li>  <!-- 2.3.2 -->
          <li>item</li>  <!-- 2.3.3 -->
        </ol>
      </li>
      <li>item</li>      <!-- 2.4   -->
    </ol>
  </li>
  <li>item</li>          <!-- 3     -->
  <li>item</li>          <!-- 4     -->
</ol>
<ol>
  <li>item</li>          <!-- 1     -->
  <li>item</li>          <!-- 2     -->
</ol>

Résultat

Spécifications

Specification
CSS Lists and Counters Module Level 3
# auto-numbering

Voir aussi