Ceci est une ancienne révision du document !
Table des matières
Numérotation automatique avec des compteurs CSS
Pour la rédaction de documents, il est souvent utile de numéroter les sections et d'avoir une table des matières.
Le protocole CSS 2.1 automatise la génération de numéros à l'aide de compteurs CSS, et cet article vous guidera dans leur utilisation.
Pré-requis
Première étape
La première étape consiste à réinitialiser le compteur et à le nommer.
Pour cela, on peut utiliser la propriété counter-reset, comme dans l'exemple suivant :
body { counter-reset:section; }
Le compteur est remis à zéro pour l'élément <body>, et le compteur a pour identifiant «section». Ce nom est à votre convenance.
La propriété peut également prendre une deuxième valeur optionnelle qui définit la valeur de départ du compteur.
Voici comment faire pour que le compteur commence à compter à partir de 5 :
body { counter-reset:section 4; }
Cette valeur est fixée à 4 car le compteur est toujours incrémenté juste avant de l'afficher. Si vous le mettez à 4, la valeur passe à 5 avant l'affichage.
Autres étapes
Incrémentation du compteur
Vous devez préciser quand le compteur augmente et de quelle valeur.
La propriété counter-increment permet de le spécifier.
La valeur par défaut de l'incrément est de 1 :
body { counter-reset: section 4; } h2 { counter-increment:section; }
Si vous préférez l'incrémenter de deux, spécifiez-le :
h2 { counter-increment:section 2; }
La propriété autorise aussi les valeurs 0 ou négatives.
Si le compteur est remis à zéro puis incrémenté sur le même élément, il est d'abord remis à zéro puis incrémenté de la valeur spécifiée, donc dans l'exemple suivant, la valeur sera toujours 2 :
h2 { counter-reset:section; counter-increment:section; }
Affichage du compteur
Une fois le compteur en place, il faut l'afficher.
Cela peut être fait avec le contenu généré en utilisant la fonction counter, et la pseudo classe :before :
body { counter-reset:section 4; } h2 { counter-increment:section; } h2:before { counter(section) ' '; }
Si vous utilisez un compteur et que vous l'incrémentez sur le même élément, comme dans les exemples ci-dessus sur l'élément <h2>, il est alors incrémenté avant d'être utilisé.
