@counter-style - Directive CSS
Résumé des caractéristiques de la directive @counter-style
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
des é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 ma-numerotation
:
@counter-style ma-numerotation {
system: numeric;
prefix: '- ';
suffix: ' -';
range:1 infinite;
pad:3 '0';
negative:'-';
symbols: 'a' 'b' 'c' 'd' 'e';
fallback:lower-roman;
}
Et voici comment appliquer cette numérotation, en utilisant la propriété list-style-type
:
li {
list-style-type: ma-numerotation;
}
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 kamel case, c'est à dire tout en minuscules avec des tirets pour séparer les mots.
Ciquez pour les syntaxes détaillées de chacun des descripteurs :
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.
- @counter-style demo { negative: '-'; }
Indique que les nombres négatifs doivent être précédés par le caractère
-
(tiret). - @counter-style demo { negative: '(' ')'; }
Indique que les nombres négatifs doivent être affichés entre parenthèses
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.
- @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.
- @counter-style demo { symbols: url(...) url(...) url(...); }
Une énumération d'adresses correspondant à des images ou des fichiers SVG.
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.🂠🂱🂲🂳56789 - @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
etfixed
, 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
etsymbolic
, 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).
- Pour les systèmes de numérotation
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
vaut10
,V
vaut5
etI
vaut1
. 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 @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.
- As de carreau
- Deux de carreau
- Trois de carreau
- Quatre de carreau
- Cinq de carreau
- Six de carreau
- Sept de carreau
- Huit de carreau
- Neuf de carreau
- Dix de carreau
- Onze
- Douze
- Treize
- Quatorze
- Quinze
Simulateur.
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 | 3 | 7 |
- Janvier
- Février
- Mars
- Avril
- Mai
- Juin
- Juillet
- Août
- Septembre
- Octobre
- Novembre
- Décembre
Prise en charge de la règle @counter-style
par les navigateurs.
La directive @counter-style
est maintenant bien reconnue par les navigateurs actuels, mais il subsiste quelques problème de compatibilité
avec certains descripteurs.
@counter-style
.
@counter-style
.
La dernière colonne (le descripteur speak-as
) concerne la restitution vocale des numérotations. Dans ce domaine, la prise en charge
est encore trop faible.
@counter-style
pad
range
suffix
prefix
system
symbols
fallback
negative
speak-as
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-style
.
Les spécifications CSS éditées par le W3C sont organisées en modules. @counter-style
fait partie du Module CSS - Styles de compteurs (CSS Counter Styles). Les définitions suivantes sont également décrites dans ce même module.