Blog iamvdo.meIls permettent de créer des compteurs automatiques, notamment pour numéroter des éléments, tels des éléments de listes, ou des titres.
counter-reset
Cette propriété CSS permet d’activer un ou plusieurs compteurs avec un nom et un numéro d’initialisation facultatif. Par défaut ce numéro vaut 0.
counter-reset: titre1;
counter-reset: titre1 titre2 titre3;
counter-reset: titre1 2 titre2;Dans l’exemple 1, un compteur titre1 est créé. Dans l’exemple 2, trois compteurs sont créés. Dans le dernier exemple, un compteur titre1 qui débutera à 2 et un compteur titre2 qui débutera à 0 sont créés.
Cette propriété est à utiliser sur un élément parent, tel le body pour une numérotation de titres, ou sur un ul pour une numérotation de liste.
counter-increment
Cette propriété permet d’incrémenter le compteur défini avec counter-reset. Pour cela, on spécifie le nom du compteur à utiliser avec éventuellement un numéro qui indique de combien le compteur est augmenté.
counter-increment: titre1;
counter-increment: titre1 2;
counter-increment: titre1 titre2;Dans l’exemple 1, le compteur titre1 est incrémenté de 1. Dans l’exemple 2, le compteur titre1 est incrémenté de 2. Dans le dernier exemple, les compteurs titre1 et titre2 sont incrémentés de 1.
Affichage des compteurs
Pour cela, les pseudo-éléments ::after ou ::before (ou d’autres) sont détournés et sont associés à la fonction counter. Voici quelques exemples :
h1::before{
content: counter(titre1);
}
h1::before{
content: counter(titre1) "-";
}
h2::before{
content: counter(titre1) "." counter(titre2) "-";
}La spécification CSS3 envisage l’utilisation d’un pseudo-éléments spécifique pour cela ::marker, mais il n’existe aucun support actuellement.
Dans l’exemple 1, tous les h1 utilise le compteur titre1. Dans l’exemple 2, tous les h1 utilise le compteur titre1 lequel est suivi d’un tiret. Dans le dernier exemple, tous les h2 utilisent le compteur titre1, suivi d’un point, suivi du compteur titre2, suivi d’un tiret.
Les styles de compteurs
Par défaut, le style des compteurs est de type decimal. Les styles disponibles sont ceux utilisés avec list-style-type : (non exhaustif)
-
decimal: 1,2,3... -
decimal-leading-zero:01,02,03... -
lower-roman: i,ii,iii,iv,v... -
upper-roman: I,II,III,IV... -
lower-latinoulower-alpha: a,b,c... -
upper-latinouupper-alpha: A,B,C... -
lower-greek: α, β, γ...
#1par Sean Polak, le 20 décembre 2012
Merci pour ses infos, c’est super intéressant !
#2par Offrande, le 5 février 2013
Vraiment utile ton site :)
Bravo et merci pour les infos !
#3par Anonyme, le 5 mars 2013
Sympas ton site, vraiment utile. Mais j’ai quand même une petite question, où doit-on appliquer list-style-type ? J’ai essayé dans les titres, dans les compteurs ...
Donc si tu pouvais en mettre un exemple s’il te plait ?
#4par Anonyme, le 5 mars 2013
En fait j’ai trouvé c’est bon ^^ :
h2 ::before
content : counter(titre1, upper-roman) ". " ;
merci pour ton site, tout est bien expliqué et commenté, bonne continuation.