counter-reset, counter-set et counter-increment.

counter-reset
counter-set
counter-increment

Résumé des caractéristiques de la propriété counter-reset

Description rapide
Initialise un compteur.
Statut
Standard
Utilisable sur
HTML
Valeurs prédéfinies
none
Pourcentages
Ne s'appliquent pas.
Valeur initiale
none
Héritée par défaut
Non.
Type d'animation
Integer : lors d'une animation, la propriété counter-reset passe d'un nombre entier à un autre, sans transition.
Module W3C
Module CSS - Listes et compteurs
Références (W3C)
 🡇  
 🡅  
Statut du document: WD (document de travail)
Statut du document: REC (recommandation)

Schéma syntaxique de counter-set, counter-reset et counter-increment.

counter-set - Syntax DiagramSyntax diagram of the counter-set CSS property. See stylescss.free.fr for details. none none id id integer integercounter-set:;counter-set:;
Schéma syntaxique de la propriété counter-set
Télécharger le schéma en SVG
counter-reset - Syntax DiagramSyntax diagram of the counter-reset CSS property. See stylescss.free.fr for details. none none id id integer integercounter-reset:;counter-reset:;
Schéma syntaxique de la propriété counter-reset
Télécharger le schéma en SVG
counter-increment - Syntax DiagramSyntax diagram of the counter-increment CSS property. See stylescss.free.fr for details. none none id id integer integercounter-increment:;counter-increment:;
Schéma syntaxique de la propriété counter-increment
Télécharger le schéma en SVG

Sur les schémas, les liens donnent accès à plus des exemples de syntaxe, les termes utilisés sont décrits ci-dessous :

  • id est le nom d'un compteur.
  • integer est un nombre entier, sans unité.
  • Plusieurs compteurs peuvent être traités en répétant la syntaxe séparée par un espace.

Les propriétés counter-reset, counter-set et counter-increment.

Ces trois propriétés manipulent 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.

  • counter-reset crée et initialise un ou plusieurs compteurs.
  • counter-increment incrémente la valeur de un ou plusieurs compteurs de la valeur indiquée. Si le compteur n'existe pas encore il sera créé.
  • counter-set force la valeur d'un ou plusieurs compteurs à la valeur indiquée. Si le compteur n'existe pas encore il sera créé.

Si une même règle 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 cpt1. 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(cpt1); counter-increment:cpt1; counter-reset:cpt1; }

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 de la fonction counter()).

... {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. Il faut cependant garder à l'esprit que l'incrément de 1 sera toujours effectué à chaque balise li : pour faire un comptage à l'envers il faut donc ôter 2 à la valeur de list-item :

li {counter-increment:list-item -2;

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.

Syntaxes 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 :

    1. 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.
    2. 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.
  • counter-reset: cpt1 10 cpt2 -1;

    Cette syntaxe initialise deux compteurs : un premier compteur nommé cpt1, et initialisé à la valeur 10, et un deuxième compteur nommé cpt2 initialisé à -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-reset n'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 cpt2 sera créé et initialisé.

    counter-reset: cpt1 10; counter-reset: cpt2 -1;
  • 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.

Syntaxes pour counter-increment.

  • counter-increment: none;

    Valeur par défaut. Aucun compteur n'est incrémenté.

  • counter-increment: cpt1 2;

    Deux valeurs séparées par un espace :

    1. La première valeur est le nom du compteur dont la valeur doit être modifiée. Le nom doit respecter les règles de nommage de CSS et ne doit pas être entouré de guillemets ni d'apostrophes.
    2. La deuxième est une valeur numérique sans unité, positive ou négative. La valeur 0 est acceptée mais il ne sert à rien d'incrémenter un compteur de zéro. Si cette deuxième valeur est absente, le compteur est incrémenté de 1.

    Remarque : si le compteur n'a pas encore été créé par counter-reset, il le sera à ce moment avec une valeur initiale de zéro, immédiatement incrémentée de la valeur indiquée.

  • counter-increment: cpt1 1 cpt2 -1;

    Cette syntaxe incrémente deux compteurs : un premier compteur nommé cpt1 est incrémenté de 1, tandis que le deuxième compteur nommé cpt2 est décrémenté de 1.

    Il n'est pas possible d'écrire plusieurs règles successives pour incrémenter plusieurs compteurs distincts. La seule syntaxe valide est celle-ci, qui consiste à énumérer les compteurs dans la même règle.

  • counter-increment: initial; (none) counter-increment: inherit; counter-increment: revert; counter-increment: revertLayer; counter-increment: unset;

    Consultez les pages suivantes pour plus de détails : initial, inherit, revert, revert-layer, unset.

Syntaxes pour counter-set.

  • counter-set: none;

    Valeur par défaut. La valeur d'aucun compteur n'est modifiée.

  • counter-set: nom-compteur 2;

    Deux valeurs séparées par un espace :

    1. La première valeur est le nom du compteur dont la valeur doit être modifiée. Le nom ne doit pas être entouré de guillemets ni d'apostrophes.
    2. La deuxième est une valeur numérique sans unité, positive, négative ou nulle. Si cette deuxième valeur est absente, la valeur du compteur est initialisée à 0.

    Si le compteur n'a pas encore été créé par counter-reset, il le sera à ce moment avec la valeur initiale indiquée.

  • counter-set: cpt1 1 cpt2 0

    Cette syntaxe initialise les valeurs de deux compteurs : la valeur du premier compteur (cpt1) est fixée à 1, tandis que la valeur du deuxième compteur (cpt2) est fixée à 0.

    Il ne faut pas écrire plusieurs règles successives pour initialiser les valeurs de plusieurs compteurs. La seule syntaxe valide est celle-ci, qui consiste à énumérer les compteurs et leurs valeurs respectives dans la même règle.

  • counter-set: initial; (none) counter-set: inherit; counter-set: revert; counter-set: revertLayer; counter-set: 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.

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.

La grippe, ça dure huit jours si on la soigne et une semaine si on ne fait rien.
Je suis adroit de la main gauche et je suis gauche de la main droite.
Être raisonnable en toutes circonstances ? Il faudrait être fou...
Se coucher tard nuit.
Il m'est arrivé de prêter l'oreille à un sourd. Il n'entendait pas mieux.
On a toujours tort d'essayer d'avoir raison devant des gens qui ont toutes les bonnes raisons de croire qu'ils n'ont pas tort ! (1)

(1) Toutes ces citations de Raymond Devos.

 

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.

   
   

Compatibilité des navigateurs avec counter-reset.

La gestion des compteurs est maintenant bien prise en charge par tous les navigateurs actuels.

Colonne 1
Support des compteurs personnalisés. Ces compteurs permettent de numéroter des images, des tableaux, etc.
Colonne 2
Support par les navigateurs des propriétés counter-reset, counter-set et counter-increment, qui permettent de gérer des compteurs personnalisés.
1
Gestion de
compteurs
2
Propriétés
counter-set
counter-reset
counter-increment
Estimation de la prise en charge globale.
97%
96%

Navigateurs 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

Voir le site Caniuse.com pour plus d'informations de compatibilité.
Caniuse
Caniuse

Histoire de la propriété counter-reset.

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 :

counter-increment
Définit le pas d'incrémentation d'un compteur.
counter-set
Change la valeur d'un ou de plusieurs compteurs.
list-style
Résumé des caractéristiques de listes à puces ou à numéros.
list-style-image
Définit une image personnalisée à utiliser à la place des puces, dans le contexte d'une énumération sous forme de liste.
list-style-position
Définit l'emplacement des marqueurs de listes (puces ou numéros).
list-style-type
Définit le type des puces ou de la numérotation.
⚠
marker-side
Définit le côté où se positionne le marqueur de liste (fonction de la langue).

Fonctions :

counter()
Renvoie la valeur actuelle d'un compteur. Ce dernier est géré par les propriétés counter-reset, counter-set et counter-increment.
counters()
Renvoie la valeur d'un compteur hiérarchique.