Numbered boxes detail, Tim Evans on Unsplash Numbered boxes detail, Tim Evans on Unsplash

Chapitrage avec les compteurs CSS

Les compteurs CSS ont été implémentés dans CSS2. Ils permettent de créer des compteurs automatiques et de les imbriquer sans utiliser de JavaScript. Ils ont un fort potentiel et leur compatibilité avec les navigateurs est excellente.

Je vous propose un exemple de chapitrage qui peut être utile pour des contenus classiques (voir rigides) du type conditions générales d'utilisation, mentions légales, etc …

Utilisation des compteurs CSS

Le compteur s'incrémente par rapport à son élément parent. Le titre unique H1 est réservé pour la page. Pour les titres H2 on utilise body comme parent. Pour les titres H3 et H4 on crée des éléments parents respectifs. On réinitialise les compteurs sur ces éléments et on les nomme.

body {
count-reset: heading2;
}
.h3-level {
count-reset: heading3;
}
.h4-level {
count-reset: heading4;
}

Pour chaque titre présent dans le chapitrage on associe le compteur correspondant qui sera incrémenté de de 1 par défaut.

h2 {
counter-increment: heading2;
}
h3 {
counter-increment: heading3;
}
h4 {
counter-increment: heading4;
}

Enfin on définit l'affichage des compteurs à l'aide du pseudo-élément :before.

h2:before {
content: counter(heading2) " - ";
}
h3:before {
content: counter(heading2) "." counter(heading3) " - ";
}
h4:before {
content: counter(heading2) "." counter(heading3) "." counter(heading4) " - ";
}

Exemple de chapitrage

Pour découvrir les possibilités qu'offrent les compteurs CSS, je vous suggère de lire l'article de Will Boyd Fun Times with CSS Counters.