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. Les compteurs CSS sont une implémentation du module Automatic counters and numbering de CSS 2.1.

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

Pour utiliser un compteur CSS, il faut d'abord réinitialiser sa valeur (0 par défaut). Pour ajouter un compteur au contenu d'un élément, il faut utiliser la fonction counter(). Dans l'exemple qui suit, la feuille de style CSS préfixe chaque titre de niveau 3 avec « Section <la valeur du compteur> : ».

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

<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

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

<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

Voir aussi

• counter-reset
• counter-increment