Counter-reset - Propriété CSS
Résumé des caractéristiques de la propriété counter-reset
nonenonecounter-reset passe d'un nombre entier à un autre, sans transition.Schéma syntaxique de la propriété counter-reset.
counter-reset.Cliquez sur les liens du schéma pour plus de précisons sur les valeurs.
Télécharger le schéma en SVG
Description des termes utilisés sur le schéma :
idest le nom d'un compteur.integerest un nombre entier, sans unité. L'étoile indique que la valeur peut être omise, elle est alors égale à1.- Plusieurs compteurs peuvent être traités en répétant la syntaxe séparée par un espace.
Description de la propriété counter-reset.
La propriété counter-reset initialise un ou des compteurs. Ceux-ci peuvent être utilisés pour numéroter des éléments
(images, cellules d'un tableau, éléments de listes, etc).
La valeur d'un compteur peut être insérée dans le document grâce à la propriété content.
Voir aussi les propriétés counter-set et counter-increment pour changer la valeur de un ou plusieurs compteurs.
Si un même groupe de règles utilise plusieurs propriété relatives à un même compteur, celles-ci sont traitées dans l'ordre suivant (quelque soit l'ordre dans lequel elles apparaissent) :
- En premier les initialisations (
counter-reset). - Ensuite les incréments (
counter-increment). - Ensuite les définitions de valeur avec (
counter-set). - Enfin, l'utilisation des compteurs, c'est à dire l'insertion de leur valeur dans le document avec la syntaxe
content:counter(...);.
Voici un exemple où trois propriétés font intervenir le même compteur : le compteur c1.
Celui-ci sera d'abord initialisé, puis incrémenté, et enfin inséré dans le document, bien que cela ne corresponde
pas à l'ordre des instructions. Autrement dit, la valeur insérée sera 1.
li {
content:counter(c1);
counter-increment:c1;
counter-reset:c1;
}
Le compteur list-item.
Ce compteur, nommé list-item, est géré de façon totalement automatique. Il est utilisé pour la numérotation des éléments dans une liste numérotée.
Les balises ol et ul l'initialisent, et les balises li l'incrémentent de 1.
Il est cependant possible pour le développeur de l'utiliser, par exemple en récupérant sa valeur avec la fonction counter() :
(reportez-vous si nécessaire à la description des fonctions counter() et counters()).
...::before {content:counter(list-item);}
Il est possible aussi d'intervenir sur son paramétrage, par exemple, le faire compter deux par deux, ou même le faire compter à l'envers.
Pour faire un comptage à l'envers il faut ôter 1 à la valeur de list-item. Sauf sur Firefox 
(voir plus loin).
li {counter-increment:list-item -1;
Les compteurs page et pages.
Ces compteurs représentent respectivement le numéro de la page et le nombre de pages. Ils ne sont valides que au moment de l'impression,
et sont fréquemment utilisés avec le sélecteur @page.
Valeurs pour counter-reset.
- counter-reset: none;
Valeur par défaut. Aucun compteur n'est initialisé.
- counter-reset: cpt1 10;
Deux informations séparées par un espace :
- Un identifiant qui sera le nom du compteur. Dans cet exemple le compteur est nommé
cpt1. Le nom est choisi par le développeur mais doit respecter les règles de nommage de CSS. D'autre part, le nom doit être inscrit tel quel, sans apostrophes ni guillemets. - Une valeur numérique sans unité, positive, négative ou nulle. Cette deuxième valeur sera la valeur de départ du compteur. Si la valeur de départ n'est pas indiquée, le compteur est initialisé à zéro.
- Un identifiant qui sera le nom du compteur. Dans cet exemple le compteur est nommé
- counter-reset: cpt1 10 cpt2 -1;
Cette syntaxe initialise deux compteurs : un premier compteur nommé
cpt1, et initialisé à la valeur10, et un deuxième compteur nommécpt2initialisé à-1.Cette syntaxe est la seule qui permette d'initialiser plusieurs compteurs sur un même élément. Écrire une deuxième règle avec
counter-resetn'initialisera que le dernier compteur : CSS n'est pas un langage algorithmique, ce sont les règles de priorité habituelles qui s'appliquent.La syntaxe suivante est donc incorrecte : seul le compteur
cpt2sera créé et initialisé.counter-reset: cpt1 10; counter-reset: cpt2 -1; - counter-reset: reversed(cpt1) 10; ⚠
Cette syntaxe initialise un décompteur c'est à dire un compteur qui décompte. La valeur initiale, si elle n'est pas précisée, vaut le nombre d'éléments à décompter.
⚠ Cette syntaxe n'est pour l'instant reconnue que par Firefox
.
- counter-reset: initial; (
none) counter-reset: inherit; counter-reset: revert; counter-reset: revertLayer; counter-reset: unset;Les valeurs communes sont présentées sur ces pages :
initial,inherit,revert,revert-layer,unset.
Exemples d'utilisation de la propriété counter-reset.
Numéroter des paragraphes.
Dans ce premier exemple, la remise à zéro du compteur est faite par la balise hr (les lignes horizontales) et son incrément par les blocs div.
:
(1) Toutes ces citations de Raymond Devos.
Numéroter les cellules d'un tableau.
Ci-dessous nous savons utilisé deux compteurs : un pour les lignes, et un autre pour les colonnes.
Les valeurs des deux compteurs sont ensuite insérées dans chacune des cellules avec content.
Compteur qui décompte.
Cet exemple ne fonctionnera que sur Firefox , les autres navigateurs ne prenant pas en charge la fonction reversed() (2025).
Ces derniers initialise le compteur à 0 et décompte ensuite ce qui donne des nombres négatifs.
Avec la fonction reversed(), le compteur est initialisé au nombre d'éléments à compter (ici trois), il est ensuite décrémenté par
counter-increment.
L'exemple est donné avec un compteur entièrement personnalisé, et avec le compteur list-item.
1.- Un décomptage avec le compteur standard
list-item. - Il n'est pas nécessaire de prévoir une règle avec
counter-increment - car le décomptage est automatique.
Numéroter des images.
L'exemple suivant est semblable aux précédents, à ceci près que ce sont des images qui sont numérotées.
Figure
Figure
Figure
Compatibilité des navigateurs avec counter-reset.
La gestion des compteurs est maintenant bien prise en charge par tous les navigateurs actuels.
counter-reset, utilisable pour initialiser un compteur personnalisé, et lui forcer une valeur.counter-set, utilisée pour forcer la valeur d'un compteur personnalisé.counter-increment, qui sert à incrémenter un compteur personnalisé.compteurs
counter-resetcounter-setcounter-incrementNavigateurs sur ordinateurs :
Navigateurs sur mobiles :
Navigateurs obsolètes ou marginaux :
Internet Explorer
QQ Browser
Safari sur IOS
Firefox pour Androïd
Opéra Mobile
Baidu Browser
KaiOS Browser
UC Browser pour Androïd
Samsung Internet
Edge
Androïd Brower
Chrome pour Androïd
Opéra
Safari
Firefox
Chrome
Opéra mini
Histoire de la propriété counter-reset.
-
CSS 2.1 - Spécification concernant les feuilles de styles en cascade - Révision 1
Introduction de deux propriétés de gestion des compteurs :counter-resetetcounter-increment.
04 Novembre 1997Document de travail.
24 Mars 1998Proposé à la recommandation.
11 Mai 1998Recommandation. -
Module CSS - Listes et compteurs - Niveau 3
Ajout de la propriétécounter-set.20 Février 2002Document de travail.
Voir aussi, au sujet des compteurs.
Le module de spécification qui regroupe ce qui concerne les compteurs et les listes numérotées s'appelle CSS Lists and Counters Module
(Module CSS - Listes et compteurs). La propriété counter-reset et les propriétés ci-dessous sont décrites dans ce module :
Propriétés :
Fonctions :
counter-reset, counter-set et counter-increment.