counter-reset
, counter-set
et counter-increment
.
Résumé des caractéristiques de la propriété counter-reset
none
none
counter-reset
passe progressivement d'une valeur à une autre.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.
- 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é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.
- 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 :
- 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.
- 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.
- 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 :
- 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.
- 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.
(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.
counter-set
counter-reset
counter-increment
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.