`Counters()` - Fonction CSS

counters()

Résumé des caractéristiques de la fonction `counters()`

Description rapide

Renvoie la valeur d'un compteur hiérarchique.

Statut

Standard

Pourcentages

Ne s'appliquent pas.

Module W3C

Module CSS - Listes et compteurs

Références (W3C)

🡇

🡅

CSS Counter Styles Level 3

Statut du document: CR (document candidat à la recommandation)

CSS Lists and Counters Module Level 3

Statut du document: WD (document de travail)

Cascading Style Sheets Level 2 - Revision 1 Specification

Statut du document: REC (recommandation)

Schéma syntaxique de `counters()`.

Schéma syntaxique de la fonction counters()
Syntaxe détaillée

Description des termes utilisés sur le schéma :

id est le nom d'un compteur, défini par la propriété counter-reset.
'char' est un caractère de séparation, entre guillemets ou apostrophes.
type est un type de numérotation : alphabetic, decimal, etc. On peut aussi utiliser la fonction symbols().

Description de la fonction `counters()`.

La fonction counters() renvoie une numérotation hiérarchique. C'est à dire une numérotation à plusieurs niveaux, comme dans l'exemple ci-dessous.

1 - Instruments à vent.
- 1.1 - Trompette.
- 1.2 - Saxophone.
2 - Instruments à percussion.
- 2.1 - Tambour.
- 2.2 - Xylophone.

La valeur `counters()` 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 `counters()`.

content: counters(cpt1, '.', decimal); n c t
1. n est le nom du compteur. Celui devra être initialisé avec la propriété counter-reset et incrémenté avec la propriété counter-increment.
2. c est le caractère qui sera utilisé pour séparer les différentes parties de la numérotation. C'est souvent le point, mais on peut envisager un tiret ou, plus rarement, plusieurs caractères.
3. t est le type de numérotation à utiliser : decimal, lower-roman, lower-alpha, etc.
  Reportez vous à la description de la fonction counter() pour une description plus complète des types de numérotations prédéfinies.

Exemples d'utilisation de la fonction `counters()`.

Les listes ci-dessous sont à la fois un exemple d'utilisation des compteurs à plusieurs niveaux, et d'autre part une liste des propriétés ou fonctions CSS relatives aux compteurs.

Sur le deuxième exemple, les balises ul et li ont été rendues visibles, il faut veiller à bien respecter l'imbrication pour le bon fonctionnement des compteurs à plusieurs niveaux.

Code HTML.

ul
  liDirectives :
    ul
      li@counter-style/li
    /ul
  /li
  liPropriétés :
    ul
      liPropriétés résumées :
        ul
          lilist-style/li
        /ul
      /li
      liPropriétés individuelles :
        ul
          licontent/li
          licounter-reset/li
          licounter-set/li
          licounter-increment/li
        /ul
      /li
   /ul
  /li
  liFonctions :
    ul
      licounter()/li
      licounters()/li
      lisymbols()/li
    /ul
  /li
/ul

Résultat dans le navigateur.

Directives :
- @counter-style
Propriétés :
- Propriétés résumées :
  - list-style
- Propriétés individuelles :
  - content
  - counter-reset
  - counter-set
  - counter-increment
  - list-style-type
Fonctions :
- counter()
- counters()
- symbols()

Support de la fonction `counters()`.

Les navigateurs actuels traitent correctement les numérotations à plusieurs niveaux, ainsi que la fonction counters().

Colonne 1

Support des compteurs personnalisés. Ces compteurs permettent de numéroter des images, des tableaux, etc.

Colonne 2

Support par les navigateurs de la fonction counters() qui permet de récupérer la valeur d'un compteur hiérarchique. Ces compteurs servent le plus souvent à numéroter des titres ou des paragraphes.

Gestion de
compteurs

Fonction
counters()

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

Historique de la fonction `counters()`.

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

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

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. Ceux-ci sont décrits plus complètement 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 counters() y est décrite, ainsi que les propriétés suivantes :