Counter-increment - Propriété CSS

Schéma de la syntaxe de counter-increment.

Description des termes utilisés sur le schéma :

• id est le nom d'un compteur.
• integer est un nombre entier, positif ou négatif, sans unité. L'étoile indique que cette valeur peut être omise, elle est alors égale à 1.
• Plusieurs compteurs peuvent être incrémentés en répétant la syntaxe séparée par un espace.

Description de la propriété counter-increment.

counter-increment incrémente le compteur personnalisé dont le nom est indiqué de la valeur indiquée. Rappelons qu'un compteur peut servir à dénombrer des images, des tableaux, des titres, ou n'importe quoi d'autre. Un compteur personnalisé est géré entièrement par le développeur. Celui-ci doit donc s'occuper d'incrémenter sa valeur. Mais counter-increment peut être utilisé sur un compteur standard comme list-item.

Si le compteur n'a pas été créé, il est créé lors de la première utilisation de counter-increment, avec une valeur de 0.

Il y a au moins trois compteurs standards : list-item pour compter les éléments d'une liste, page pour numéroter les pages imprimées, et pages pour les dénombrer.

La valeur d'un compteur peut être récupérée par l'une des fonctions counter() ou counters(), et affiché par content.

counter-increment fonctionne avec deux autres propriétés :

• counter-reset : Initialise un ou plusieurs compteurs personnalisés.
• counter-set : Change la valeur d'un ou de plusieurs compteurs.

Valeurs 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, car la deuxième règle écraserait la première. 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.

Exemples d'utilisation de la propriété counter-increment.

Exemple : numérotation des titres.

Les titres h2 de cette page ont été numérotés, sauf les titres h2 de la table des matières. Plusieurs règles ont été nécessaires : une premiere sur le sélecteur main pour initialiser le compteur, une deuxième sur main h2 pour l'incrémenter, et enfin une troisième sur ::before de h2 pour insérer la valeur du compteur.

Numérotation des 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.

Numérotation de listes.

La numérotation des listes est automatique avec le compteur list-item. Il est néanmoins possible de modifier l'incrément de ce compteur : pour compter de deux en deux, il faut demander un incrément de 2. Mais il n'est pas nécessaire de prévoir l'initialisation du compteur, ni son affichage au début des éléments de liste.

1. Ces éléments sont numérotés de deux en deux.
2. La numérotation commence à 2 au lieu de 1.
3. L'initialisation du compteur est fait par la balise ol.
4. L'affichage au debut des balises li est également déjà prévu.

Compatibilité des navigateurs avec counter-increment.

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

1

Compteurs
personnalisés

2

Propriété
counter-increment

3

Propriété
counter-reset

4

Propriété
counter-set

Estimation de la prise en charge globale.

97%

96%

96%

92%

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

Caniuse

Caniuse

Histoire de la propriété counter-increment.

• CSS 2.1 - Spécification concernant les feuilles de styles en cascade - Révision 1

  Première définition de la propriété counter-increment.
  

  04 Novembre 1997

  Document de travail.

  

  24 Mars 1998

  Proposé à la recommandation.

  

  11 Mai 1998

  Recommandation.

• Module CSS - Listes et compteurs - Niveau 3

  Pas de changements concernant cette propriété.
  

  20 Février 2002

  Document de travail.

  

  

  

Voir aussi, au sujet des compteurs.

Le gestion des compteurs personnalisé est décrite dans le module de spécification s'appelle CSS Lists and Counters Module. La propriété counter-increment et les propriétés ci-dessous sont décrites dans ce module :

Propriétés :

Fonctions :