Souscrire
Blog iamvdo.mePropriétés: counters
Maj: septembre 2011
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, 3 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, il faut utiliser les pseudo-éléments ::after ou ::before (ou d’autres) 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) "-";
}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> utilise 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-latin ou lower-alpha : a,b,c...
- upper-latin ou upper-alpha : A,B,C...
- lower-greek : α, β, γ...
