Rgle CSS `@counter-style`

Baseline

Large disponibilit

Cette fonctionnalit est bien tablie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis septembre 2023.

* Certaines parties de cette fonctionnalit peuvent bnficier de prise en charge variables.

Voir la compatibilit complte
En savoir plus

La rgle @ CSS @counter-style vous permet d'tendre les styles de liste prdfinis et de dfinir vos propres styles de compteurs qui ne font pas partie de l'ensemble des styles prdfinis. La rgle @counter-style contient des descripteurs dfinissant comment la valeur du compteur est convertie en une reprsentation sous forme de chane de caractres.

Bien que CSS propose de nombreux styles de compteurs prdfinis, la rgle @counter-style offre une mthode ouverte pour crer des compteurs personnaliss. Cette rgle rpond aux besoins typographiques du monde entier en permettant aux auteurices de dfinir leurs propres styles de compteurs lorsque les styles prdfinis ne conviennent pas.

Syntaxe

css

@counter-style thumbs {
  system: cyclic;
  symbols: "\1F44D";
  suffix: " ";
}

La rgle @counter-style est identifie par un nom de style de compteur, et le style du compteur nomm peut tre affin l'aide d'une <declaration-list> compose d'un ou plusieurs descripteurs et de leurs valeurs.

Nom du style de compteur

<counter-style-name>: Fournit un nom pour votre style de compteur. Il est dfinit comme un <custom-ident> sensible la casse, sans guillemets. La valeur ne doit pas tre gale none. Comme tous les identifiants personnaliss, la valeur de votre style de compteur ne peut pas tre un mot-cl global CSS. vitez les autres valeurs numres des proprits CSS, y compris les valeurs des proprits de liste et de style de compteur. Le nom de votre compteur ne peut pas tre une valeur insensible la casse de la proprit list-style-type comme decimal, disc, square, circle, disclosure-open et disclosure-closed.

Note : Les noms de styles de compteur non surchargs decimal, disc, square, circle, disclosure-open et disclosure-closed ne peuvent pas tre utiliss comme nom de compteur personnalis. Cependant, ils sont valides dans d'autres contextes o le type de donne <counter-style-name> est attendu, comme dans system: extends <counter-style-name>.

Descripteurs

system: Indique l'algorithme utiliser pour convertir la valeur entire du compteur en une reprsentation sous forme de chane de caractres. Si la valeur est cyclic, numeric, alphabetic, symbolic ou fixed, le descripteur symbols doit aussi tre dfini. Si la valeur est additive, le descripteur additive-symbols doit galement tre dfini.
symbols: Dfinit les symboles utiliser pour la reprsentation du marqueur. Les symboles peuvent contenir des chanes de caractres, des images ou des identifiants personnaliss. Ce descripteur est requis si le descripteur system est dfini sur cyclic, numeric, alphabetic, symbolic ou fixed.
additive-symbols: Dfinit les tuples additifs (ensemble d'lments) pour les systmes additifs. Alors que les symboles dfinis dans le descripteur symbols sont utiliss pour construire la reprsentation du marqueur par la plupart des algorithmes, les systmes de compteur additifs, comme les chiffres romains, consistent en une srie de symboles pondrs. Le descripteur est une liste de symboles de compteur avec leurs poids entiers non ngatifs, lists par poids dcroissant. Ce descripteur est requis si le descripteur system est dfini sur additive.
negative: Indique les symboles ajouter avant ou aprs la reprsentation du compteur si la valeur est ngative.
prefix: Indique un symbole ajouter avant la reprsentation du marqueur. Les prfixes sont ajouts la fin, avant tout caractre ajout aux valeurs ngatives par le descripteur negative.
suffix: Indique, comme le descripteur prefix, un symbole ajouter aprs la reprsentation du marqueur. Les suffixes viennent aprs la reprsentation, y compris aprs tout caractre ajout aux valeurs ngatives par le descripteur negative.
range: Dfinit l'intervalle de valeurs pour lequel le style de compteur est applicable. Si un style de compteur est utilis pour reprsenter une valeur en dehors des intervalles dfinis par ce descripteur, le style de compteur bascule sur son style de fallback.
pad: utiliser lorsque vous souhaitez que la reprsentation du marqueur ait une longueur minimale. Par exemple, si vous voulez que les compteurs commencent 01 et continuent avec 02, 03, 04, etc., alors le descripteur pad doit tre utilis. Pour les reprsentations plus grandes que la valeur de pad dfinie, le marqueur est construit normalement.
speak-as: Dcrit comment les synthtiseurs vocaux, comme les lecteurs d'cran, doivent annoncer le style de compteur. Par exemple, la valeur du marqueur de l'lment de liste peut tre lue comme un nombre ou un alphabet pour les listes ordonnes, ou comme une indication sonore pour les listes non ordonnes, selon la valeur de ce descripteur.
fallback: Indique le nom du compteur de repli utiliser si le systme dfinit ne peut pas construire la reprsentation d'une valeur de compteur ou si la valeur du compteur est en dehors de l'intervalle dfinit par range. Si le compteur de secours choue aussi, alors le secours de ce compteur est utilis, si dfini. S'il n'y a pas de compteur de secours ou si la chane de systmes de secours ne permet pas de reprsenter la valeur, le style decimal est utilis en dernier recours.

Syntaxe formelle

@counter-style = 
  @counter-style <counter-style-name> { <declaration-list> }  

<counter-style-name> = 
  <custom-ident>

Cette syntaxe reflte le dernier standard selon CSS Counter Styles Level 3. Tous les navigateurs n'ont peut-tre pas implment toutes les parties. Voir la Compatibilit des navigateurs pour plus d'informations sur la prise en charge.

Exemples

Dfinir les symboles avec `@counter-style`

HTML

html

<ul class="exemple">
  <li>Un</li>
  <li>Deux</li>
  <li>Trois</li>
  <li>Quatre</li>
  <li>Cinq</li>
  <li>Six</li>
</ul>

CSS

css

@counter-style circled-alpha {
  system: fixed;
  symbols:                          ;
  suffix: " ";
}

.exemple {
  list-style: circled-alpha;
}

Rsultat

Voir plus d'exemples sur la page de dmonstration (angl.) (code (angl.)).

Styles de compteurs prts l'emploi

Retrouvez une collection de plus de 100 extraits de code counter-style dans le document Styles de compteur prts l'emploi (angl.). Ce document propose des compteurs adapts aux besoins des langues et cultures du monde entier.

Le convertisseur de styles de compteurs (angl.) utilise cette liste pour tester et gnrer du code copier-coller pour les styles de compteurs.