Counter-set - Propriété CSS

Schéma syntaxique de la propriété counter-set.

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

• id est l'identifiant d'un compteur.
• integer est un nombre entier, positif, négatif ou nul, sans unité. L'étoile indique que cette valeur peut être omise. Elle est alors égale à 1.
• Pour initialiser plusieurs compteurs, répéter la syntaxe en séparant par un espace.

Description de la propriété counter-set.

La propriété counter-set force la valeur d'un compteur déjà existant. Si le compteur n'a jamais été créé il l'est à ce moment. La différence avec la propriété counter-reset est que cette derniere crée systématiquement un nouveau compteur.

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

• Tout d'bord, les initialisations (counter-reset).
• Ensuite les incrémentations (counter-increment).
• Ensuite les définitions de valeur avec (counter-set).
• Enfin, la récupération des valeurs de compteurs avec la syntaxe content:counter(...);.

Plusieurs compteurs standards existent. Par exemple, celui nommé list-item utilisé pour la numérotation des éléments dans une liste. Il est géré de façon automatique : les balises ol et ul l'initialisent, et les balises li l'incrémentent de 1, bien qu'il soit possible de changer l'incrément avec counter-increment.

Il y aussi les compteurs page et pages qui représentent respectivement le numéro de la page et le nombre de pages imprimées. Ils ne sont valides que au moment de l'impression, avec le sélecteur @page.

counter-set fonctionne avec deux autres propriétés : counter-reset et counter-increment. Voyez aussi les fonctions counter() et counters() pour récupérer la valeur d'un compteur.

Valeurs pour counter-set.

• counter-set: none;

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

• counter-set: c1 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: c1 1 c2 0

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

  N'écrivez pas plusieurs règles successives pour initialiser les valeurs de plusieurs compteurs car la dernière règle écraserait les précédentes. 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-set.

Numérotation de paragraphes avec remise à zéro.

Dans ce premier exemple, la remise à zéro du compteur c1 est faite par la balise hr (les lignes horizontales).

Compatibilité des navigateurs avec counter-set.

La gestion de counter-set et des autres propriétés relatives aux compteurs personnalisés est maintenant correcte sur tous les navigateurs actuels.

1

Gestion des
compteurs
personnalisés

2

Propriété
counter-set
 

3

Propriété
counter-reset
 

4

Propriété
counter-increment
 

Estimation de la prise en charge globale.

97%

92%

96%

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

Caniuse

Caniuse

Histoire de la propriété counter-set.

• Module CSS - Listes et compteurs - Niveau 3

  Concernant counter-set. Première description de la propriété counter-set, en complément des propriétés counter-reset et counter-increment.
  

  20 Février 2002

  Document de travail.

  

  

  

Voir aussi, au sujet des compteurs.

Les compteurs et les listes numérotées sont décrits dans le module de spécification qui s'appelle Module CSS - Listes et compteurs La propriété counter-set et les propriétés ci-dessous sont décrites dans ce module :

Propriétés :

Fonctions :