@counter-style - Directive CSS

Description de la directive @counter-style.

@counter-style est une directive du langage CSS, qui permet de définir un système de numérotation totalement personnalisé. Cette numérotation est ensuite utilisable pour construire des listes numérotées, ou pour identifier d0es éléments tels que des figures, des tableaux, etc.

La numérotation définie par @counter-style peut ensuite être appliquée, souvent aux balises li, avec la propriété list-style-type.

Exemple de syntaxe pour définir une numérotation, que nous choisissons de nommer demo :

Et voici comment appliquer cette numérotation, en utilisant la propriété list-style-type :

Le nom choisi pour la numérotation personnalisée ne doit pas être un mot-clé déjà utilisé en CSS et en rapport avec les listes à puces ou les listes numérotées. Ceci bien sûr afin d'éviter tout conflit lors de l'application de cette numérotation avec list-style-type. Il est donc déconseillé, voire interdit de nommer la numérotation avec des noms tels que none, decimal, , square, circle, inside, etc.

Les noms des numérotations sont sensibles à la casse. Nous vous recommandons d'opter pour la convention de nommage largement utilisée en CSS : le camel-case, c'est à dire tout en minuscules avec des tirets pour séparer les mots.

Voyons maintenant la syntaxe, cliquez pour les syntaxes détaillées de chacun des descripteurs :

• additive-symbols
• fallback
• negative
• pad
• prefix
• suffix
• range
• speak-as
• symbols
• system

Syntaxes pour le descripteur negative.

Le descripteur négative définit quelles sont les caractères à ajouter aux nombres négatifs, avant ou après le nombre. Si le système de numérotation est cyclic ou fixed le descripteur negative est ignoré.

• @counter-style demo { negative: '-'; }

  Indique que les nombres négatifs doivent être précédés par le caractère - (tiret).

  1. Pour faire apparaître des nombres négatifs, il faut utiliser la propriété counter-increment.
  2. sur le compteur list-item.
• @counter-style demo { negative: '(' ')'; }

  Indique que les nombres négatifs doivent être affichés entre parenthèses

  1. Pour faire apparaître des nombres négatifs, il faut utiliser la propriété counter-increment.
  2. sur le compteur list-item.

Syntaxes pour le descripteur symbols.

• @counter-style demo { symbols: 'a' 'b' 'c' 'd'; }

  Une énumération de caractères séparés par des espaces. S'il s'agit de caractères uniques, les apostrophes ou les guillemets peuvent être omis. Ces caractères seront utilisés comme des chiffres pour construire la numérotation.

  1. Cette numérotation est construite à partir.
  2. des symboles graphiques ① ② ③, etc.
• @counter-style demo { symbols: 'un' 'deux' 'trois' 'quatre'; }

  Une énumération de mots, délimités par des apostrophes ou des guillemets, et séparés par des espaces.

  1. Cette numérotation est construite à partir.
  2. des mots un, deux, trois, etc.
• @counter-style demo { symbols: url(...) url(...) url(...); }

  Une énumération faisant appel à des adresses correspondant à des images ou des fichiers SVG.

  La numérotation ci-dessous est construire à partir de ces images mais cela ne fonctionne pour l'instant (2025) que sur Safari.

       , etc.

  1. Premier élément.
  2. Deuxième élément.
  3. Troisième élément.

Syntaxes pour le descripteur system.

Le descripteur system définit quelle est la logique utilisée pour la numérotation. On pense tout de suite à la numérotation décimale, mais de nombreux autres systèmes de numérotation sont possibles (alphabétique, additif, etc).

• @counter-style demo { system: numeric; }

  Le premier symbole fourni est associé à la valeur 0. Il n'apparait donc pas en début de numérotation (on commence à 1). Arrivé au dernier symbole la numérotation se continue suivant la logique d'une numérotation numérique.

  🂱
  1

  🂲
  2

  🂳
  3

  🂱🂠
  10

  🂱🂱
  11

  🂱🂲
  12

  🂱🂳
  13

  🂲🂠
  20

  🂲🂱
  21
• @counter-style demo { system: alphabetic; }

  Le premier symbole fourni est associé à la valeur 1. Arrivé au dernier symbole la numérotation se continue suivant la logique d'une numérotation alphabétique.

  🂠
  a

  🂱
  b

  🂲
  c

  🂳
  d

  🂠🂠
  aa

  🂠🂱
  ab

  🂠🂲
  ac

  🂠🂳
  ad

  🂱🂠
  ba
• @counter-style demo { system: cyclic; }

  Utilise successivement tous les symboles fournis et recommence au premier après avoir dépassé le dernier.

  🂠

  🂱

  🂲

  🂳

  🂠

  🂱

  🂲

  🂳

  🂠
• @counter-style demo { system: fixed; }

  Utilise successivement tous les symboles fournis et continue ensuite sur la numérotation définie par le descripteur fallback. Si ce dernier n'est pas précisé, la numérotation continue en décimal classique.

  🂠

  🂱

  🂲

  🂳

  5

  6

  7

  8

  9
• @counter-style demo { system: symbolic; }

  Utilise successivement tous les symboles fournis et continue ensuite en doublant ces symboles, puis en les triplant, etc.

  🂠

  🂱

  🂲

  🂳

  🂠🂠

  🂱🂱

  🂲🂲

  🂳🂳

  🂠🂠🂠
• @counter-style demo { system: additive; }

  Type de numérotation semblable à la numérotation en chiffres romains. Nécessite qu'une valeur numérique ait été affectée à chacun des symboles. C'est le descripteur additive-symbols qui permet de faire cette affectation :

  additive-symbols: 7 🂠 , 3 🂳 , 1 🂱;

  🂱
  1

  🂱🂱
  1+1

  🂳
  3

  🂳🂱
  3+1

  🂳🂱🂱
  3+1+1

  🂱🂠
  7-1

  🂠
  7

  🂠🂱
  7+1

  🂠🂱🂱
  7+1+1
• @counter-style demo { system: extends lower-roman; prefix:'-'; suffix'-'; }

  Permet d'utiliser une numérotation déjà existante en changeant certains de ses paramètres. Dans l'exemple, on utilise la numérotation standard lower-roman mais en ajoutant un tiret avant et après le numéro.

Syntaxes pour les descripteurs prefix et suffix.

Ces deux descripteurs indiquent un ou plusieurs caractères qui seront ajoutés avant (prefix) ou après le numéro (suffix).

• @counter-style demo { suffix:' '; }

  Cet exemple de syntaxe ajoute un espace après le numéro.

• @counter-style demo { system: numeric; suffix:'-'; prefix:'-'; }

  Ce deuxième exemple génère des numéros qui ressemblent à -1-.

Syntaxes pour le descripteur range.

range définit les limites à ne pas dépasser pour la numérotation, les bornes sont incluses.
Exemple : range:1 10; indique que la numérotation fonctionne depuis le numéro 1 jusqu'au numéro 10 inclus.

Si le compteur sort de ces limites, la numérotation reprend le style défini par le descripteur fallback. Si ce dernier n'est pas défini la numérotation continue en numérique classique.

Le mot infinite peut être utilisé à la place de l'une ou des deux valeurs pour indiquer une numérotation sans limites.

• @counter-style demo { range: auto; }

  La valeur auto est interprétée différemment par les navigateurs suivant le système de numérotation choisi :

  • Pour les systèmes de numérotation cyclic, numeric et fixed, la plage de comptage n'est pas limitée, ni pour les nombres négatifs, ni pour les nombres positifs.
  • Pour les systèmes de numérotation alphabetic et symbolic, la plage de numérotation s'étend de 1 à l'infini (pas de nombres négatifs).
  • Pour le sytème de numérotation additive la plage s'étend de 0 à l'infini (pas de nombres négatifs).

Syntaxes pour le descripteur pad.

Ce descripteur définit sur combien de caractères la numérotation doit être affichée et quel caractère servira de remplissage. Couramment le caractère de remplissage sera le zéro ou l'espace.

• @counter-style demo { system: numeric; pad: 3 '0'; }

  Cette syntaxe indique une numérotation sur 3 digits, avec des zéros en-tête si nécessaire : 001, 085, 108...

Syntaxes pour le descripteur additive-symbols.

additive-symbols n'est utile que pour le système de numérotation additive. Ce paramètre associe une valeur numérique à chacun des symboles. Chaque numéro sera construit par addition ou soustraction de ces valeurs. C'est le principe des chiffres romains. Les symboles doivent être énumérés par ordre décroissant de leur valeur.

Il n'est pas nécessaire de préciser la clause symbols lorsque additive-symbols est utilisé.

• @counter-style demo { system: additive; symbols: 'I' 'V' 'X'; additive-symbols: 10 'X', 5 'V', 1 'I'; }

  Cette syntaxe définit le début de la numérotation en chiffres romains, dans laquelle X vaut 10, V vaut 5 et I vaut 1. Il n'y a pas de zéro dans ce genre de numérotation.

Syntaxes pour le descripteur fallback.

fallback indique une numérotation de remplacement, à utiliser lorsque la numérotation principale n'est plus possible : dépassement des limites définies par range, atteinte du dernier symbole, etc.

• @counter-style demo { system: alphabetic; range: 1 10; fallback: decimal; }

  Cet exemple de syntaxe indique que la numérotation se continue en mode décimal classique si on atteint la limite fixée à 10 par range.

Syntaxes pour le descripteur speak-as.

Ce paramètre configure la restitution sonore de la numérotation. Cela suppose bien sûr un navigateur équipé d'une synthèse vocale.

• @counter-style demo { speak-as: auto; }

  Le navigateur décide de la meilleure façon de prononcer la numérotation, en fonction du système de numérotation choisi :
  alphabetic : le numéro sera épelé.
  cyclic : signal sonore.
  Dans les autres cas, le numéro sera lu comme un nombre.

• @counter-style demo { speak-as: bullet; }

  Le navigateur retranscrit la numérotation par un signal sonore.

• @counter-style demo { speak-as: numbers; }

  Pendant la restitution sonore, le numéro est lu comme une valeur numérique.

• @counter-style demo { speak-as: words; }

  Le numéro est lu comme un mot.

• @counter-style demo { speak-as: spell-out; }

  Le numéro sera épelé caractère par caractère.

• @counter-style demo { speak-as: autre-numérotation; }

  La prononciation des numéros sera celle définie par autre-numérotation. Ceci peut être utile lorsque une numérotation utilise des symboles non prononçables, comme des images ou des caractères spéciaux.

Exemples d'utilisation de la directive @counter-style.

Numérotation en binaire.

Une numérotation en morse.

Sans doute pas très utile car le code morse a été abandonné même par les militaires. Mais c'est une bonne illustration pour un système de comptage personnalisé.
Cliquez sur l'exemple pour afficher le code CSS.

Numérotation avec des cartes à jouer.

Cliquez sur l'exemple pour afficher le code CSS.

1. As de carreau
2. Deux de carreau
3. Trois de carreau
4. Quatre de carreau
5. Cinq de carreau
6. Six de carreau
7. Sept de carreau
8. Huit de carreau
9. Neuf de carreau
10. Dix de carreau
11. Onze
12. Douze
13. Treize
14. Quatorze
15. Quinze

Le simulateur ci-dessous construit des numérotations à partir des quatre symboles des cartes à jouer, dans cet ordre. Observez comment chacun des systèmes continue la numérotation au delà de 4.

Pour la numérotation additive, on utilise que 3 symboles, avec les valeurs suivantes :
additive-symbols:7 '♦',3 '♥',1 '♣';

1. Janvier
2. Février
3. Mars
4. Avril
5. Mai
6. Juin
7. Juillet
8. Août
9. Septembre
10. Octobre
11. Novembre
12. Décembre

Compatibilité des navigateurs avec la directive @counter-style.

La directive @counter-style est maintenant bien reconnue par les navigateurs actuels, mais il subsiste quelques problème de compatibilité avec certains descripteurs.

Remarques :

(1) Support partiel car il manque le support pour des symboles sous forme d'images.

(2) N'accepte pas une image en tant que valeur pour les symboles.

1

Directive
@counter-style

2

Descripteur
symbols

3

Descripteur
speak-as

Estimation de la prise en charge globale.

0%

14%

77%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

Baidu Browser

1

QQ Browser

Opéra Mobile

1

2

Firefox

1

2

Chrome

1

2

Safari

Edge

1

2

Opéra

1

2

Chrome pour Androïd

1

2

Safari sur IOS

Samsung Internet

1

2

UC Browser pour Androïd

Androïd Brower

1

2

Firefox pour Androïd

1

2

KaiOS Browser

1

Opéra mini

Voir le site Caniuse.com pour plus d'informations de compatibilité.

Caniuse

Caniuse

Caniuse

Évolution de la directive @counter-style.

• Module CSS -Stylisation des compteurs - Niveau 3

  Introduction des numérotations et compteurs personnalisés, et de la directive @counter-style.
  

  09 Octobre 2012

  Document de travail.

  

  03 Février 2015

  Candidat à la recommandation.

  

  

Voir aussi, au sujet des numérotations personnalisées.

La directive @counter-style est décrite dans la spécification "Module CSS - Styles de compteurs" (CSS Counter Styles).
Ces autres définitions sont également présentées dans ce même module.

Fonctions :

Descripteurs :