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 :

CSS - Directive @counter-style

@counter-style est une directive du langage CSS, qui permet de définir un système de numérotation totalement personnalisé. Cette numérotation est ensuite utilisable pour construire des listes numérotées, ou pour identifier des éléments tels que des figures, des tableaux, etc.

Description de la directive @counter-style.

@counter-style définit un nouveau type de numérotation pour les listes numérotées. Les possibilités de numérotation prédéfinies sont déjà très nombreuses (voir la propriété list-style-type) mais il est cependant possible de définir une numérotation personnalisée.

La numérotation définie peut ensuite être appliquée, souvent aux balises li, avec la propriété list-style-type.

Exemple de syntaxe pour définir une numérotation, que nous choisissons de nommer ma-numerotation :

@counter-style ma-numerotation { system: numeric; prefix: '- '; suffix: ' -'; range:1 infinite; pad:3 '0'; negative:'-'; symbols: 'a' 'b' 'c' 'd' 'e'; fallback:lower-roman; }

Et voici comment appliquer cette numérotation, en utilisant la propriété list-style-type :

li { list-style-type: ma-numerotation; }

Syntaxes pour symbols.

  • @counter-style demo { symbols: 'a' 'b' 'c' 'd'; }

    Une énumération de caractères séparés par des espaces. S'il s'agit de caractères uniques, les apostrophes ou les guillemets peuvent être omis. Ces caractères seront utilisés comme des chiffres pour construire la numérotation.

  • @counter-style demo { symbols: 'un' 'deux' 'trois' 'quatre'; }

    Une énumération de mots, délimités par des apostrophes ou des guillemets, et séparés par des espaces.

  • @counter-style demo { symbols: url(...) url(...) url(...); }

    Une énumération d'adresses correspondant à des images ou des fichiers SVG.

Syntaxes pour system.

  • @counter-style demo { system: numeric; }

    Le premier symbole fourni est associé à la valeur 0. Il n'apparait donc pas en début de numérotation (on commence à 1). Arrivé au dernier symbole la numérotation se continue suivant la logique d'une numérotation numérique.

    🂱🂲🂳 🂱🂠🂱🂱 🂱🂲🂱🂳🂲🂠🂲🂱
    123101112132021
  • @counter-style demo { system: alphabetic; }

    Le premier symbole fourni est associé à la valeur 1. Arrivé au dernier symbole la numérotation se continue suivant la logique d'une numérotation alphabétique.

    🂠🂱🂲🂳 🂠🂠🂠🂱 🂠🂲🂠🂳🂱🂠
    abcdaaabacadba
  • @counter-style demo { system: cyclic; }

    Utilise successivement tous les symboles fournis et recommence au premier après avoir dépassé le dernier.

    🂠🂱🂲🂳 🂠🂱 🂲🂳🂠
  • @counter-style demo { system: fixed; }

    Utilise successivement tous les symboles fournis et continue ensuite sur la numérotation définie par le paramètre fallback. Si ce dernier n'est pas précisé, la numérotation continue en décimal classique.

    🂠🂱🂲🂳 56 789
  • @counter-style demo { system: symbolic; }

    Utilise successivement tous les symboles fournis et continue ensuite en doublant ces symboles, puis en les triplant, etc.

    🂠🂱🂲🂳 🂠🂠🂱🂱 🂲🂲🂳🂳🂠🂠🂠
  • @counter-style demo { system: additive; }

    Type de numérotation semblable à la numérotation en chiffres romains. Nécessite qu'une valeur numérique ait été affectée à chacun des symboles. C'est additive-symbols qui permet de faire cette affectation :

    additive-symbols: 7 🂠 , 3 🂳 , 1 🂱;

    🂱🂱🂱 🂳🂳🂱 🂳🂱🂱 🂱🂠 🂠🂠🂱 🂠🂱🂱
    11+133+13+1+17-177+17+1+1
  • @counter-style demo { system: extends lower-roman; prefix:'-'; suffix'-'; }

    Permet d'utiliser une numérotation déjà existante en changeant certains de ses paramètres. Dans l'exemple, on utilise la numérotation standard lower-roman mais en ajoutant un tiret avant et après le numéro.

Syntaxes pour prefix et suffix.

Ces deux paramètres indiquent un ou plusieurs caractères qui seront ajoutés avant (prefix) ou après le numéro (suffix).

  • @counter-style demo { suffix:' '; }

    Cet exemple de syntaxe ajoute un espace après le numéro.

  • @counter-style demo { system: numeric; suffix:'-'; prefix:'-'; }

    Ce deuxième exemple génère des numéros qui ressemblent à -1-.

Syntaxes pour range.

range définit les limites à ne pas dépasser pour la numérotation, les bornes sont incluses.
Exemple : range:1 10; indique que la numérotation fonctionne depuis le numéro 1 jusqu'au numéro 10 inclus.

Si le compteur sort de ces limites, la numérotation reprend le style défini par le paramètre fallback. Si ce dernier n'est pas défini la numérotation continue en numérique classique.

Le mot infinite peut être utilisé à la place de l'une ou des deux valeurs pour indiquer une numérotation sans limites.

Syntaxes pour pad.

Ce paramètre définit sur combien de caractères la numérotation doit être affichée et quel caractère servira de remplissage. Couramment le caractère de remplissage sera le zéro ou l'espace.

  • @counter-style demo { system: numeric; pad: 3 '0'; }

    Cette syntaxe indique une numérotation sur 3 digits, avec des zéros en-tête si nécessaire : 001, 085, 108...

Syntaxes pour additive-symbols.

additive-symbols n'est utile que pour le système de numérotation additive. Ce paramètre associe une valeur numérique à chacun des symboles. Chaque numéro sera construit par addition ou soustraction de ces valeurs. C'est le principe des chiffres romains. Les symboles doivent être énumérés par ordre décroissant de leur valeur.

Il n'est pas nécessaire de préciser la clause symbols lorsque additive-symbols est utilisé.

  • @counter-style demo { system: additive; symbols: 'I' 'V' 'X'; additive-symbols: 10 'X', 5 'V', 1 'I'; }

    Cette syntaxe définit le début de la numérotation en chiffres romains, dans laquelle X vaut 10, V vaut 5 et I vaut 1. Il n'y a pas de zéro dans ce genre de numérotation.

Syntaxes pour fallback.

fallback indique une numérotation de remplacement, à utiliser lorsque la numérotation principale n'est plus possible : dépassement des limites définies par range, atteinte du dernier symbole, etc.

  • @counter-style demo { system: alphabetic; range: 1 10; fallback: decimal; }

    Cet exemple de syntaxe indique que la numérotation se continue en mode décimal classique si on atteint la limite fixée à 10 par range.

Syntaxes pour speak-as.

Ce paramètre configure la restitution sonore de la numérotation. Cela suppose bien sûr un navigateur équipé d'une synthèse vocale.

  • @counter-style demo { speak-as: auto; }

    Le navigateur décide de la meilleure façon de prononcer la numérotation, en fonction du système de numérotation choisi :
    alphabetic : le numéro sera épelé.
    cyclic : signal sonore.
    Dans les autres cas, le numéro sera lu comme un nombre.

  • @counter-style demo { speak-as: bullet; }

    Le navigateur retranscrit la numérotation par un signal sonore.

  • @counter-style demo { speak-as: numbers; }

    Le numéro est lu comme une valeur numérique.

  • @counter-style demo { speak-as: words; }

    Le numéro est lu comme un mot.

  • @counter-style demo { speak-as: spell-out; }

    Le numéro sera épelé caractère par caractère.

Simulateur.

Le simulateur ci-dessous construit des numérotations à partir des quatre symboles des cartes à jouer, dans cet ordre. Observez comment chacun des systèmes continue la numérotation au delà de 4.

list-style-type :

Pour la numérotation additive, on utilise que 3 symboles, avec les valeurs suivantes :

additive-symbols:7 '♦',3 '♥',1 '♣';
137
  1. Janvier
  2. Février
  3. Mars
  4. Avril
  5. Mai
  6. Juin
  7. Juillet
  8. Août
  9. Septembre
  10. Octobre
  11. Novembre
  12. Décembre

Autres exemples.

Numérotation en binaire.


Une numérotation en morse.

Sans doute pas très utile car le code morse a été abandonné même par les militaires. Mais c'est une bonne illustration pour un système de comptage personnalisé.
Cliquez sur l'exemple pour afficher le code CSS.


Numérotation avec des cartes à jouer.

Cliquez sur l'exemple pour afficher le code CSS.

  1. As de carreau
  2. Deux de carreau
  3. Trois de carreau
  4. Quatre de carreau
  5. Cinq de carreau
  6. Six de carreau
  7. Sept de carreau
  8. Huit de carreau
  9. Neuf de carreau
  10. Dix de carreau
  11. Onze
  12. Douze
  13. Treize
  14. Quatorze
  15. Quinze

Prise en charge de la règle @counter-style par les navigateurs.

Afficher les versions antérieures   Afficher la version à venir  

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.

Ajout de contenu - Fonctions.

  • attr() : Renvoie la valeur d'un attribut.
  • counter() : Renvoie la valeur actuelle d'un compteur.
  • 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 - Fonctions.

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