Counter() - Fonction CSS

Schéma syntaxique de counter().

Sur le diagram, les termes en gras sont les termes prédéfinis de CSS, les autres sont décrits ci-dessous :

• id est le nom d'un compteur.
• type est un type de numérotation : decimal, alphabetic, etc.
• La fonction symbols() peut également être insérée dans la syntaxe.

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, pour gérer les compteurs, les propriétés counter-set, counter-reset et counter-increment et la directive @counter-style.

La valeur counter() peut être utilisée avec les propriétés suivantes :

• content : Ajoute du contenu dans le document, principalement avec les sélecteurs ::before et ::after.

Syntaxes de la fonction 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é avec counter-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 :

  1. decimal : des chiffres utilisés de façon classique (1, 2, 3...).
  2. decimal-leading-zero : des chiffres sur 2 digits (01, 02, 03...).
  3. lower-roman : numérotation en chiffres romains minuscules (i, ii, iii, iv...).
  4. upper-roman : numérotation en chiffres romains majuscules (I, II, III, IV...).
  5. lower-alpha : numérotation basée sur les lettres de l'alphabet latin en minuscules (a, b, c...).
  6. upper-alpha : numérotation basée sur les lettres de l'alphabet latin en majuscules (A, B, C...).
  7. 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 fonction symbols() pour davantage de précisions sur cette fonction.

Exemples d'utilisation de la fonction counter().

Notez la différence entre les options numeric 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 codes des caractères UTF.

Simulateur avec la fonction counter().

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.

Support de la fonction counter().

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.

1

Gestion de
compteurs

2

Fonction
counter()

Estimation de la prise en charge globale.

97%

96%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

QQ Browser

Safari sur IOS

Firefox pour Androïd

Opéra Mobile

Baidu Browser

KaiOS Browser

UC Browser pour Androïd

Samsung Internet

Edge

Androïd Brower

Chrome pour Androïd

Opéra

Safari

Firefox

Chrome

Opéra mini

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

Caniuse

Caniuse

Historique de la fonction counter().

• CSS 2.1 - Spécification concernant les feuilles de styles en cascade - Révision 1

  Première définition sommaire des compteurs et de la fonction counter().
  

  04 Novembre 1997

  Document de travail.

  

  24 Mars 1998

  Proposé à la recommandation.

  

  11 Mai 1998

  Recommandation.

• Module CSS - Listes et compteurs - Niveau 3

  Ajout de nombreux nouveaux styles de compteurs, décrits dans un module de spécification à part.
  

  20 Février 2002

  Document de travail.

  

  

  

• Module CSS -Stylisation des compteurs - Niveau 3

  Définition des styles de compteurs, y compris de nombreuses numérotations internationales.
  

  09 Octobre 2012

  Document de travail.

  

  03 Février 2015

  Candidat à la recommandation.

  

  

Voir aussi, au sujet des listes et compteurs.

Le module de spécification qui regroupe les définitions concernant les listes à puces et les listes numérotées s'appelle CSS Lists and Counters Module (Module CSS - Listes et compteurs). La fonction counter() et les propriétés ci-dessous sont décrites dans ce module :

Propriétés :

Fonctions :