CSS - 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-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().

• 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 : voyez le simulateur ci-dessous pour découvrir les systèmes de numérotation internationaux.
• 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.

Simulateur.

Exemples avec la fonction symbols().

Cliquez sur les exemples ci-dessous pour faire apparaître le CSS correspondant.

Notez la différence entre les options numéric et alphabetic : cette dernière option ne comporte pas de symbole zéro.

Pour trouver les codes des caractères utilisés dans la numérotation, vous pouvez vous servir de notre Outil de recherche de caractères.

Compatibilité et prise en charge par les navigateurs.

Les navigateurs actuels traitent correctement les numérotations classiques (numeric, alphabetic...) mais il reste des problèmes de compatibilité avec les numérotations en langues exotiques.

Afficher le tableau de compatibilité (informations fournies par canIuse.com).

Voir aussi...

Ajout de contenu - Propriétés.

• content : Ajoute du contenu dans le document.
• counter-increment : Définit le pas d'incrémentation d'un compteur.
• counter-reset : Initialise un compteur.
• hanging-punctuation : Définit la ponctuation suspendue (caractères autorisés à déborder dans la marge).
• quotes : Caractères utilisés pour les guillemets.

Ajout de contenu - Directives.

• @charset : Indique le jeu de caractères utilisé dans la feuille de styles.
• @counter-style : Définition d'un compteur personnalisé.

Ajout de contenu - Fonctions.

• attr() : Renvoie la valeur d'un attribut.
• counters() : Renvoie la valeur d'un compteur hiérarchique.

Listes à puces ou à numéros - Propriétés.

• list-style : Résumé des caractéristiques de listes à puces ou numérotées.
• list-style-image : Définit une image à utiliser à la place des puces.
• list-style-position : Définit l'emplacement des marqueurs de listes (puces ou numéros).
• list-style-type : Définit le type des puces ou de la numérotation.

Listes à puces ou à numéros - Directives.

• @counter-style : Définition d'un compteur personnalisé.

Listes à puces ou à numéros - Fonctions.

• counters() : Renvoie la valeur d'un compteur hiérarchique.
• symbols() : Définit tous les paramètres d'une numérotation