Compteurs

Les compteurs sont des “variables” tenues par le langage CSS dont la valeur est incrémentée (augmente) par des règles utilisées par le langage, chaque fois que la variable en question est utilisée.

En informatique, une variable est une case de mémoire, étiquetée, dans laquelle le développeur peut stocker une information à utiliser plus tard dans le programme. Une variable est “détruite” à chaque fermeture du programme et la case mémoire dans laquelle l’information a été stockée est libérée.

En CSS, les compteurs permettent en plus d’ajuster le style de l’élément en fonction de là où ce dernier est placé.

Numérotation automatique avec les compteurs

Pour pouvoir profiter des compteurs en CSS, les propriétés suivantes doivent être utilisées :

• counter-reset : permet de créer ou de remettre à zéro un compteur
• counter-increment : permet d’incrémenter (d’augmenter) un compteur
• content : permet d’insérer le contenu généré
• counter() ou counters() : ces fonctions permettent d’ajouter la valeur d’un compteur à un élément.

Pour utiliser un compteur, il faut d’abord le créer, en utilisant la propriété counter-reset.

Exemple :

body {
    counter-reset: section; /* Création du compteur "section" */
}

h1::before {
    counter-increment: section; /* Chaque fois que le navigateur rencontrera un titre h1, le compteur section est incrémenté */
    content: "Section " counter(section) " : "; /* Affichage du contenu */
}

Compteurs d’imbrication