@counter-style

Syntaxe

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

La règle @counter-style est identifiée par un nom de style de compteur, et le style du compteur nommé peut être affiné à l'aide d'une <declaration-list> composée 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 spécifié comme un <custom-ident> sensible à la casse, sans guillemets. La valeur ne doit pas être égale à none. Comme tous les identifiants personnalisés, la valeur de votre style de compteur ne peut pas être un mot-clé global CSS. Évitez les autres valeurs énumérées des propriétés CSS, y compris les valeurs des propriétés de liste et de style de compteur. Le nom de votre compteur ne peut pas être une valeur insensible à la casse de la propriété list-style-type comme decimal, disc, square, circle, disclosure-open et disclosure-closed.

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

Descripteurs

system

Indique l'algorithme à utiliser pour convertir la valeur entière du compteur en une représentation sous forme de chaîne de caractères. Si la valeur est cyclic, numeric, alphabetic, symbolic ou fixed, le descripteur symbols doit aussi être spécifié. Si la valeur est additive, le descripteur additive-symbols doit également être spécifié.

symbols

Définit les symboles à utiliser pour la représentation du marqueur. Les symboles peuvent contenir des chaînes de caractères, des images ou des identifiants personnalisés. Ce descripteur est requis si le descripteur system est défini sur cyclic, numeric, alphabetic, symbolic ou fixed.

additive-symbols

Définit les tuples additifs (ensemble d'éléments) pour les systèmes additifs. Alors que les symboles spécifiés dans le descripteur symbols sont utilisés pour construire la représentation du marqueur par la plupart des algorithmes, les systèmes de compteur additifs, comme les chiffres romains, consistent en une série de symboles pondérés. Le descripteur est une liste de symboles de compteur avec leurs poids entiers non négatifs, listés par poids décroissant. Ce descripteur est requis si le descripteur system est défini sur additive.

negative

Indique les symboles à ajouter avant ou après la représentation du compteur si la valeur est négative.

prefix

Indique un symbole à ajouter avant la représentation du marqueur. Les préfixes sont ajoutés à la fin, avant tout caractère ajouté aux valeurs négatives par le descripteur negative.

suffix

Indique, comme le descripteur prefix, un symbole à ajouter après la représentation du marqueur. Les suffixes viennent après la représentation, y compris après tout caractère ajouté aux valeurs négatives par le descripteur negative.

range

Définit l'intervalle de valeurs pour lequel le style de compteur est applicable. Si un style de compteur est utilisé pour représenter une valeur en dehors des intervalles définis par ce descripteur, le style de compteur basculera sur son style de fallback.

pad

À utiliser lorsque vous souhaitez que la représentation 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 représentations plus grandes que la valeur de pad spécifiée, le marqueur est construit normalement.

speak-as

Décrit comment les synthétiseurs vocaux, comme les lecteurs d'écran, doivent annoncer le style de compteur. Par exemple, la valeur du marqueur de l'élément de liste peut être lue comme un nombre ou un alphabet pour les listes ordonnées, ou comme une indication sonore pour les listes non ordonnées, selon la valeur de ce descripteur.

fallback

Indique le nom du compteur de repli à utiliser si le système spécifié ne peut pas construire la représentation d'une valeur de compteur ou si la valeur du compteur est en dehors de l'intervalle spécifié par range. Si le compteur de secours échoue aussi, alors le secours de ce compteur est utilisé, si défini. S'il n'y a pas de compteur de secours ou si la chaîne de systèmes de secours ne permet pas de représenter la valeur, le style decimal sera utilisé en dernier recours.

Syntaxe formelle

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

Exemples

Spécifier les symboles avec counter-style

HTML

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

CSS

@counter-style circled-alpha {
  system: fixed;
  symbols: Ⓐ Ⓑ Ⓒ Ⓓ Ⓔ Ⓕ Ⓖ Ⓗ Ⓘ Ⓙ Ⓚ Ⓛ Ⓜ Ⓝ Ⓞ Ⓟ Ⓠ Ⓡ Ⓢ Ⓣ Ⓤ Ⓥ Ⓦ Ⓧ Ⓨ Ⓩ;
  suffix: " ";
}

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

Résultat

Voir plus d'exemples sur la page de démonstration (code).

Styles de compteurs prêts à l'emploi

Retrouvez une collection de plus de 100 extraits de code counter-style dans le document Styles de compteur prêts à l'emploi ^(angl.). Ce document propose des compteurs adaptés aux besoins des langues et cultures du monde entier.

Le convertisseur de styles de compteurs ^(angl.) utilise cette liste pour tester et générer du code à copier-coller pour les styles de compteurs.

Spécifications

Compatibilité des navigateurs

Voir aussi

• counter()
• counters()
• symbols()
• list-style, list-style-image, list-style-position, list-style-type
• Le module de styles de compteur CSS