counter() - Fonction CSS
Résumé des caractéristiques de la fonction counter()
Description de la fonction counter()
.
La fonction counter()
renvoie la valeur d'un compteur.
Ce qui peut servir à numéroter des images, des notes, etc.
Voir aussi les propriétés counter-set
, counter-reset
et counter-increment
et la directive @counter-style
.
La fonction counter() peut être utilisée avec :
content
: Ajoute du contenu dans le document.
Syntaxe de la fonction counter()
.
n
est le nom d'un compteur.
t
est un type de numérotation.
La fonction symbols()
peut également être insérée dans la syntaxe.
counter(
)
- content: counter(cpt); n
n
est le nom du compteur. Celui-ci aura été défini et initialisé avec la propriétécounter-reset
, puis incrémenté aveccounter-increment
.n
peut aussi être le nom d'un compteur défini par@counter-style
. - content: counter(cpt,decimal); n t
t
est le type du compteur : la logique et les symboles qu'il utilise pour la numérotation. Cela peut être une des valeurs suivantes :decimal
: des chiffres utilisés de façon classique (1, 2, 3...).decimal-leading-zero
: des chiffres sur 2 digits (01, 02, 03...).lower-roman
: numérotation en chiffres romains minuscules (i, ii, iii, iv...).upper-roman
: numérotation en chiffres romains majuscules (I, II, III, IV...).lower-alpha
: numérotation basée sur les lettres de l'alphabet latin en minuscules (a, b, c...).upper-alpha
: numérotation basée sur les lettres de l'alphabet latin en majuscules (A, B, C...).- Numérotation dans une langue non européenne :
hebrew
,armenian
,japanese-formal
, etc. Reportez-vous à la page sur la propriétélist-style-type
pour une liste plus complète des numérotation non latines.
- content: counter(cpt, symbols(decimal '⓿' '❶' '❷' '❸' '❹' '❺' '❻' '❼' '❽' '❾')); n t
La numérotation est définie à partir des symboles listés et du type de comptage
t
indiqué. Reportez-vous à la fonctionsymbols()
pour davantage de précisions sur cette fonction.
Exemples d'utilisation.
Notez la différence entre les options numéric
et alphabetic
:
cette dernière option ne comporte pas de symbole zéro.
Numérotation numérique.
Numérotation alphabétique.
Numérotation avec des symboles.
Attention ! Les numérotations avec symboles sont encore mal prises en charge par les navigateurs. Chargez cette page avec Firefox pour voir le résultat.
Pour trouver les codes des caractères utilisés dans la numérotation, vous pouvez vous servir de notre outil Object.
Simulateur.
Le simulateur propose de nombreuses numérotation non latines, mais, pour une liste plus complète, reportez-vous à la page sur
la propriété list-style-type
.
Un compteur nommé demo
est initialisé au début de la liste des mois, et incrémenté à chaque mois.
Compatibilité et prise en charge par les navigateurs.
Les navigateurs actuels traitent correctement les numérotations classiques (numeric
, lower-alpha
...)
mais il reste des problèmes de compatibilité avec les numérotations en langues exotiques et avec les numérotations avec symboles.
counter()
.
symbols
de la fonction counter()
.
counter()
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()
.
Les spécifications CSS éditées par le W3C sont organisées en modules. counter()
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.