Une remarque ? Une suggestion ?...

Merci de participer à l'amélioration de ce site. Prenez le temps de rédiger votre remarque le plus précisément possible :

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
Type de valeur
Id Entier
Valeurs prédéfinies
none
Pourcentages
Ne s'appliquent pas.
Valeur initiale
none
Héritée par défaut
Non
Type d'animation
Computed value : lors d'une animation, la propriété counter-reset passe progressivement d'une valeur à une autre.
Module W3C
Module CSS - Listes et compteurs
Références (W3C)
Statut du document:: WD (document de travail)

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(...);.

Les propriétés relatives aux compteurs ont un ordre d'exécution prédéfini. 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érer 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; }

Syntaxes pour counter-reset.

id est le nom d'un compteur.
integer est un nombre entier, qui est la valeur de départ de ce compteur.
Plusieurs compteurs peuvent être initialisés en répétant la syntaxe séparée par un espace.

Syntaxe de counter-resetSchéma syntaxique de la propriété CSS counter-reset (initialisation de compteurs). none none id id integer integercounter-reset:;counter-reset:;Télécharger l'image en SVG
  • 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; counter-reset: inherit; counter-reset: revert; counter-reset: revert-layer; counter-reset: unset;

    La valeur initiale est : none.

Syntaxes pour counter-increment.

id est le nom d'un compteur.
integer est un nombre entier : la valeur à incrémenter sur ce compteur.
Plusieurs compteurs peuvent être incrémentés en répétant la syntaxe séparée par un espace.

Syntaxe de counter-incrementSchéma syntaxique de la propriété CSS counter-increment (incrémentation de compteurs). none none id id integer integercounter-increment:;counter-increment:;Télécharger l'image en SVG
  • 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 , 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; counter-increment: inherit; counter-increment: revert; counter-increment: revert-layer; counter-increment: unset;

    La valeur initiale est : none.

Syntaxes pour counter-set.

id est le nom d'un compteur.
integer est un nombre entier, la valeur à affecter sur le compteur.
Plusieurs compteurs peuvent être ré-initialisés en répétant la syntaxe séparée par un espace.

Syntaxe de counter-setSchéma syntaxique de la propriété CSS counter-set (initialisation de compteurs). none none id id integer integercounter-set:;counter-set:;Télécharger l'image en SVG
  • 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; counter-set: inherit; counter-set: revert; counter-set: revert-layer; counter-set: unset;

    La valeur initiale est : none.

Exemples.

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 cellules. Les valeurs des deux compteurs sont ensuite insérées dans chacune des cellules avec content.

   
   

Prise en charge par les navigateurs (compatibilité).

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

Colonne 1
Gestion de compteurs personnalisés.
Colonne 2
Prise en charge des trois propriétés CSS relatives aux compteurs.
1
Counters
2
counter-set
counter-reset
counter-increment
Estimation de la prise en charge en pourcentage du parc actuel.
100%
97%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Androïd Brower

Baidu Browser

Chrome

Chrome pour Androïd

Edge

Firefox

Firefox pour Androïd

Internet Explorer

KaiOS Browser

Opéra

Opéra Mobile

QQ Browser

Safari

Safari sur IOS

Samsung Internet

Oméra mini

Voir aussi, dans le même module de standardisation que counter-reset.

Les spécifications CSS éditées par le W3C sont organisées en modules. counter-reset fait partie du Module CSS - Listes et compteurs (CSS Lists and Counters Module). Les définitions suivantes sont également décrites dans ce même module.

Propriétés.

Définit le pas d'incrémentation d'un compteur.
Change la valeur d'un ou de plusieurs compteurs.
Résumé des caractéristiques de listes à puces ou numérotées.
Définit une image à utiliser à la place des puces.
Définit l'emplacement des marqueurs de listes (puces ou numéros).
Définit le type des puces ou de la numérotation.
Définit le côté où se positionne le marqueur de liste (fonction de la langue).

Fonctions.

Renvoie la valeur actuelle d'un compteur.
Renvoie la valeur d'un compteur hiérarchique.