Les compteurs en CSS

Also available in: English

CSS depuis sa version 2.1 propose un système de compteur relativement méconnu du fait d’une compatibilité relativement récente sur IE. D’autant plus que certains défendront la position suivante : CSS n’est pas fait pour cela, il faut utiliser JavaScript. Soit ! Mais sachez que ça existe. Petite introduction !

Comme je vous le disais, les compteurs existent et sont définis depuis CSS2.1 par le W3C. L’arrivée de CSS3 a permis de compléter quelque peu la définition et de l’inclure dans un module nommé « Generated and Replaced Content« .

Au cours de cet article, nous allons jouer avec trois propriétés et une fonction :

• counter-reset : cette propriété permet d’initialiser un compteur (le créer). Il suffit pour cela de renseigner un ou plusieurs noms de compteurs suivi de sa valeur numérique initiale.
  Exemple :
  

  counter-reset: compteur1 4 compteur2 0;

  Ici nous avons deux compteurs initialisés : compteur1 qui démarre à 4, et compteur 2 qui démarre à 0.

• counter-set : cette propriété permet de redéfinir la valeur d’un compteur, sans en créer un nouveau. Il suffit pour cela de renseigner un ou plusieurs noms de compteurs existant suivi de sa nouvelle valeur numérique.
  Exemple :

  counter-set: compteur1 0 compteur2 3;

  Ici nous avons deux compteurs redéfinis : compteur1 qui redémarre à 0, et compteur 2 qui redémarre à 3.

• counter-increment : cette propriété permet d’incrémenter un compteur. Il suffit pour cela de renseigner le nom d’un ou plusieurs compteurs, chacun suivi du chiffre à incrémenter.
  Exemple :

  counter-increment: compteur1 2 compteur2 4;

  Ici nos deux compteurs initiaux seront augmentés de 2 pour le compteur1 et 4 pour le compteur2.

• counter() : cette fonction associée au pseudo-élément ::before ou ::after et à la propriété content permet d’insérer le compteur dans votre page. Cela génère un contenu dynamique. Elle attend un paramètre et un second optionnel. Le premier est le nom du compteur, le second et le style de compteur. (même valeurs que list-style-type)
  Exemple :
  

  li::before {
  	content: counter(compteur1, decimal-leading-zero) " – ";
  }

  Dans cet exemple, le contenu d’un élément li sera précédé d’un contenu de type « 04 – »

Concernant le style du counter, il est possible de spéficier les valeurs « disc », « circle », « square » et « none », ce qui fait qu’il est possible de ne rien générer. Je n’ai pas encore trouvé d’utilité réelle à ces valeurs.

À l’heure où j’écris ces lignes la propriété counter-set n’est pas reconnue par les navigateurs, et c’est bien dommage.

Démonstration par l’exemple

Le plus simple pour présenter les fonctionnalités des compteurs, c’est de vous proposer un document bien hiérarchisé avec quelques titres de différents niveaux.
Voici la démonstration en ligne :
Démonstration des compteurs CSS

Le code utilisé en HTML est relativement simple : il suffit de faire en sorte d’avoir des h2, h3 et h4 dans un bloc de texte, par exemple.
Je vous donne quand même un extrait si vous voulez tester :

<h2>This is the new way of life</h2>
<p>Lorem ipsum dolor sit amet, […]</p>

<h3>Lorem ipsum dolor sit amet, consectetur</h3>

<h4>Adipisicing elit</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing[…]</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do […]</p>

<h4>Anim id est laborum</h4>
<p>Lorem ipsum […]</p>

<h3>Reprehenderit in voluptate</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore[…]</p>

<h2>Come back later</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore […]</p>

La CSS est relativement courte en ce qui concerne les compteurs, il faut juste prêter attention aux détails.

/* on initialise nos compteurs
   nommés title2, title3 et title4 */
body {
	counter-reset: title2 title3 title4;
}

/* on incrémente la valeur de
   title2 dès qu'on voit un h2 */
h2 {
	counter-increment: title2 1;
}

/* puis on génère un contenu avant
   composé du chiffre en lettre
   romaine et d'un tiret */
h2::before {
	content: counter(title2, upper-roman) " – ";
}

h3 {
	counter-increment: title3 1;
}

h3::before {
	content: counter(title3, decimal) " – ";
}

h4 {
	counter-increment: title4 1;
}

/* ici on compose le compteur
   à l'aide du chiffre du titre
   supérieur, puis d'une lettre
   du compteur courant */
h4::before {
	content: counter(title3, decimal) "." counter(title4, lower-alpha) " – ";
}

Démonstration sur une liste numérotée

Vous allez me dire : À quoi bon ? Puisque la liste ol est déjà numérotée.
Oui, c’est vrai, mais l’utilisation du contenu généré permet d’appliquer des styles plus riches grâce à CSS.
Un exemple en image sur ce qui est un vieux site de ma composition :

Il y a pas mal de choses à savoir sur les listes, notamment l’élément ol. Apprenez-en plus sur les attributs start, reversed et les types de compteur.

N’hésitez pas si vous avez des questions 😉