CSS est un langage de description, pas de programmation. \u00c7a, c’est clair : pas de variables, pas de boucles, pas de fonctions… C’est bien pour \u00e7a que les pr\u00e9processeurs comme Sass et Less existent. Attendez : pas de variables ? Hmm en fait si, d’une certaine mani\u00e8re : notamment pour la num\u00e9rotation.<\/p>\n
<\/p>\n
Imaginez un article long, s\u00e9par\u00e9 en chapitres titr\u00e9s par des h2, et en sous-parties titr\u00e9es par des h3. Ce serait pratique de num\u00e9roter tout \u00e7a, n’est-ce pas ? Mais si on le fait \u00e0 la main, au moindre ajout de chapitre entre deux il faudra tout refaire. C’est l\u00e0 que CSS entre dans la danse. Oui, CSS, ce brave CSS, qui va nous permettre d’ajouter des chiffres (ou des lettres) \u00e0 nos titres, automatiquement.<\/p>\n
<h1>La vie sur Terre<\/h1> \n<h2>Les animaux<\/h2>\n<h3>Les mammif\u00e8res<\/h3>\n<p>Nous allons vous parler des mammif\u00e8res, de la famille des \"Ils ont des poils\".<\/p>\n<h3>Les reptiles<\/h3>\n<p>Nous allons vous parler des reptiles, de la famille des \"Ils n'ont pas toujours de pattes\".<\/p>\n<h2>Les v\u00e9g\u00e9taux<\/h2>\n<h3>Les cormophytes<\/h3>\n<p>Nous allons vous parler des cormophytes, de la famille des \"Ils ont des tiges\".<\/p>\n<h3>Les thallophytes<\/h3>\n<p>Nous allons vous parler des thallophytes, de la famille des \"Ils sont gluants\".<\/p>\n<\/code><\/pre>\n(oui, la classification a \u00e9volu\u00e9 depuis, et il en manque de gros bouts, mais zut, c’est mon exemple)<\/p>\n
(et si vous trouvez ma r\u00e9f\u00e9rence, je vous aime)<\/p>\n
Le style<\/h2>\n
On d\u00e9finit que le compteur des chapitres s’appellera \u00ab\u00a0chapter\u00a0\u00bb, et celui des sous-parties \u00ab\u00a0subpart\u00a0\u00bb. Oui, je sais, je donne \u00e0 mes variables des noms incroyablement originaux.<\/p>\n
Premi\u00e8re chose : mettre \u00e0 z\u00e9ro le compteur des chapitres, sur body<\/code>.<\/p>\nbody {\n counter-reset: chapter;\n}\n<\/code><\/pre>\nSur les h2<\/code> (titres de chapitre), on incr\u00e9mente la variable chapter<\/code>, tout en remettant \u00e0 z\u00e9ro subpart<\/code>.<\/p>\nh2 {\n counter-increment: chapter;\n counter-reset: subpart;\n}\n<\/code><\/pre>\nSur les h3<\/code>, on incr\u00e9mente juste la variable subpart<\/code>.<\/p>\nh3 {\n counter-increment: subpart; \n}\n<\/code><\/pre>\nJusqu’ici, rien que du tr\u00e8s logique, n’est-ce pas ?<\/p>\n
Mais nous n’avons fait que d\u00e9finir, il faut maintenant afficher. Et pour cela, on va utiliser la valeur counter()<\/code>. En argument, le nom du compteur, tout simplement. Comme il s’agit d’un contenu, la propri\u00e9t\u00e9 \u00e0 qui on donne cette valeur, c’est content<\/code> – je ne crois pas qu’elle puisse s’appliquer \u00e0 une autre.<\/p>\nEt comme pour l’instant, content<\/code> n’est utilisable que sur les pseudo-\u00e9l\u00e9ments, on va partir sur :before<\/code> pour l’exemple.<\/p>\nIci, on affiche le num\u00e9ro du chapitre suivi imm\u00e9diatement d’un point puis un espace (eh oui, on peut concat\u00e9ner en CSS, et l’op\u00e9rateur de concat\u00e9nation est l’espace).<\/p>\n
h2:before {\n content: counter(chapter) \". \";\n}\n<\/code><\/pre>\nLes sous-parties se voient affubl\u00e9es du num\u00e9ro de chapitre, suivi d’un point, puis du num\u00e9ro de sous-partie, et encore un point et un espace.<\/p>\n
h3:before {\n content: counter(chapter) \".\" counter(subpart) \". \";\n}\n<\/code><\/pre>\n