counter-reset |
Réinitialisation du compteur |
| CSS2.1 |
|
Syntaxe
|
counter-reset: name number|inherit|initial|none;
|
Paramètres
| Paramètre |
Description |
| name |
Ce paramètre permet d'indiquer le nom du compteur devant être réinitialisé. |
| number |
Ce paramètre permet d'indiquer la valeur que doit avoir le compteur lorsque l'occurrence du sélecteur est réglé. La valeur par défaut est 0. |
| inherit |
Ce paramètre permet d'indiquer qu'il faut hérité de la valeur de son parent. |
| initial |
Ce paramètre permet d'indiquer qu'il faut appliquer la valeur par défaut de cette propriété. |
| none |
Ce paramètre permet d'indiquer qu'il n'y a pas de compteur. C'est la valeur par défaut. |
Description
Cette propriété permet de créer ou réinitialiser un ou plusieurs compteurs de CSS.
Remarques
- Fonctionnalité principale : La propriété counter-reset permet de créer ou de réinitialiser des compteurs CSS. Ces compteurs sont utilisés en
combinaison avec counter-increment et content pour générer des numérotations dynamiques, souvent dans des listes ou des sections, sans avoir à les coder manuellement.
- Créer un compteur : Avec counter-reset, vous pouvez initialiser un compteur en lui attribuant un nom et une valeur de départ. Par exemple,
counter-reset: section 1; crée un compteur nommé section commençant à 1. Ce compteur peut ensuite être manipulé et affiché avec d'autres propriétés.
- Valeur par défaut : La valeur par défaut du compteur réinitialisé est 0, sauf si une valeur spécifique est indiquée. Par exemple, counter-reset: myCounter;
initialise myCounter à 0, tandis que counter-reset: myCounter 10; démarre à 10.
- Utilisation avec les pseudo-éléments : Les compteurs réinitialisés avec counter-reset sont souvent utilisés avec les pseudo-éléments ::before ou
::after pour afficher leur valeur.
- Hiérarchie des compteurs : counter-reset est utile pour créer des hiérarchies de compteurs imbriqués, comme dans des documents structurés
(exemple : chapitres et sous-sections). Par exemple, réinitialiser un compteur secondaire à chaque nouvel élément principal permet une numérotation hiérarchique.
- Impact sur l'ordre des styles : La propriété doit être utilisée dans le bon contexte ou élément pour s'assurer que le compteur est réinitialisé au bon
moment. Par exemple, placer un counter-reset au mauvais endroit peut entraîner des incohérences dans la numérotation.
- Combinaison avec plusieurs compteurs : Vous pouvez réinitialiser plusieurs compteurs en une seule déclaration en les séparant par des espaces. Par exemple,
counter-reset: chapter 1 section 0; crée deux compteurs (chapter et section) avec des valeurs de départ spécifiques.
- Compatibilité des navigateurs : La propriété counter-reset est largement prise en charge par les navigateurs modernes. Cependant, elle n'est pleinement
fonctionnelle que lorsqu'elle est combinée avec d'autres fonctionnalités comme les pseudo-éléments et counter-increment. Les anciens navigateurs peuvent avoir des
limitations dans leur prise en charge des compteurs complexes.
Dernière mise à jour : Dimanche, le 20 décembre 2015
