Blog iamvdo.meLes compteurs...
Les compteurs peuvent s’avérer très utile en CSS, notamment dans le cas de cette démo : créer une hiérarchisation de titres au sein d’une page HTML.
Je vous invite d’ailleurs à lire l’article sur les compteurs.
Comment fonctionne cet exemple ?
Pour fonctionner, il faut tout d’abord initialiser les compteurs que l’on veut incrémenter. Pour cela, on utilise counter-reset sur l’élément parent : ici je crée 3 compteurs.
#article{
counter-reset:titre1 titre2 titre3;
}Ensuite, pour chaque titre présent dans la page, le compteur associé est incrémenté de 1 (par défaut).
#article h1{
counter-increment:titre1;
}
#article h2{
counter-increment:titre2;
}
#article h3{
counter-increment:titre3;
}Puis à l’aide de la pseudo-classe ::before et de la propriété content, on ajoute le ou les compteurs avant chaque titres :
#article h1::before{
content: "Titre "counter(titre1)"-";
}
#article h2::before{
content: counter(titre1)"."counter(titre2)"-";
}
#article h3::before{
content: counter(titre1)"."counter(titre2)"."counter(titre3)"-";
}Remarquez ici que l’on utilise les compteurs dans chaque titre concaténés à des chaines de caractères : "Titre" ou "." ou "-" ou autre. Vous pouvez utiliser toutes les valeurs possibles de content.
Pour plus de détails sur les compteurs, consultez l’article ici.
#1par boggy, le 10 août 2011
Problème : Si les compteurs sont utilisé de cette façon l’incrémentation sera mauvaise sauf pour le premier titre.
On retrouve :
Titre 1-
1.1-
1.1.1-
1.1.2-
Titre 2-
2.2- (au lieu de 2.1- normalement)
2.2.3- (au lieu de 2.1.1- normalement)
(et ainsi de suite...)
Titre 3-
3.3-
3.3.4-
#2par cedricici, le 2 janvier 2012
Effectivement.
Il faut integrer un
counter-reset:titre2 titre3;dans le h1
et
counter-reset: titre3;dans h2
#3par gemcod, le 22 février 2012
Bonjour,
Le problème dans la hiérarchie présentée ici est que l’on obtient 2.2.3 alors qu’on devrait logiquement avoir avant 2.2.1 et 2.2.2.
Le plan continue la numérotation du 1.1.2 ce qui n’est pas logique.