Une remarque ? Une suggestion ?...

Merci de participer à l'amélioration de ce site. Prenez le temps de rédiger votre remarque le plus précisément possible :

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)
Statut du document:: WD (document de travail)

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 fonction counters() peut être utilisée avec :

  • content : Ajoute du contenu dans le document.

Syntaxe de la fonction counters().

n est le nom d'un compteur.
'c' est un caractère de séparation.
t est un type de numérotation (on peut aussi utiliser la fonction symbols()).

counters(
Schéma syntaxique de la fonction counters() en CSSNumérotation à plusieurs niveaux en CSS : syntaxe de la fonction counters(). n n 'c' 'c' t t symbols() symbols()
)
  • 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.

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.

Compatibilité et prise en charge par les navigateurs.

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

Colonne 1
Gestion de compteurs personnalisés.
Colonne 2
Prise en charge de la fonction CSS counters().
1
Counters
2
counters()
Estimation de la prise en charge en pourcentage du parc actuel.
100%
97%

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

Les spécifications CSS éditées par le W3C sont organisées en modules. counters() 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.

Propriétés.

Définit le pas d'incrémentation d'un compteur.
Initialise un compteur.
Change la valeur d'un ou de plusieurs compteurs.
Résumé des caractéristiques de listes à puces ou numérotées.
Définit une image à utiliser à la place des puces.
Définit l'emplacement des marqueurs de listes (puces ou numéros).
Définit le type des puces ou de la numérotation.
Définit le côté où se positionne le marqueur de liste (fonction de la langue).

Fonctions.

Renvoie la valeur actuelle d'un compteur.