Compter le nombre d’éléments en CSS grâce à la fonction counter()

Blueberry cakes
Copyright : Brina Blum

Il est possible de compter automatiquement des lignes, des blocs et des entités HTML en CSS. Il n’est pas question ici d’utiliser la balise <ol> qui permet de compter les éléments d’une liste, mais de profiter de la fonction counter().

Cette fonction se révèle utile à bien des égards. À titre d’exemple, on pourrait s’en servir pour compter et numéroter les différents sous-titres d’une page sans que cette donnée de lecture n’apparaisse pour le référencement. On pourrait aussi ajouter le nombre de lignes que possède un bloc de code et empêcher ainsi que ses chiffres apparaissent lors d’un copier-coller. On pourrait également numéroter les images d’une page et indiquer ce nombre avec des annotations comme « Figure 1 » dans les légendes de ces images.

Utiliser la fonction counter()

Afin d’utiliser cette fonction, il faut d’abord instancier l’élément que l’on souhaite dénombrer. Dans l’exemple ci-dessous, les balises h2 sont comptées en vue d’informer sur la structure de la page. Il est ainsi possible d’utiliser counter() pour tout type d’élément d’un code HTML.

/* On précise ici l'élément <body> mais il est possible de spécifier un contexte plus précis */
body {
   counter-reset: subtitleCounter; /* On instancie le compteur que l'on souhaite utiliser */
}

Il faut ensuite indiquer au langage CSS quel élément on souhaite incrémenter à chaque utilisation dans notre code HTML. On précise donc le compteur que l’on souhaite utiliser pour ces actions.

/* On "compte" ici tous les <h2> présents dans la page */
h2 {
   counter-increment: subtitleCounter; /* Attention à bien utiliser le même nom pour le compteur */
}

On peut ensuite utiliser cet élément pour l’affichage du nombre d’éléments de type h2 devant chacun des sous-titres présents dans le contenu textuel de la page HTML.

/* À l'aide du sélecteur CSS before... */
h2:before {
   content: counter(subtitleCounter); /* On ajoute le nombre d'éléments devant le <h2> */
}

Et le tour est joué ! Cette fonctionnalité est introduite depuis la spécification W3C de CSS 2.1 en 1998. Elle est relativement bien supportée par l’ensemble des navigateurs : l’utilisation de counter() est possible sur Internet Explorer 8 par exemple. Cette fonction peut permettre de repenser l’organisation d’éléments dans une page HTML.

Le site Can I Use propose un inventaire précis du support des navigateurs vis-à-vis de cette fonction.

2 réflexions sur « Compter le nombre d’éléments en CSS grâce à la fonction counter() »

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.