system

La descripteur system, utilisé avec la règle @ @counter-style, permet de définir l'algorithme utilisé pour convertir la valeur entière d'un compteur en une chaîne de caractères.

Si l'algorithme défini dans ce descripteur est incapable de construire la chaîne de caractères pour une valeur donnée, ce sera le système de secours qui sera utilisé (fallback).

Syntaxe

/* Valeurs avec un mot-clé */
system: cyclic;
system: numeric;
system: alphabetic;
system: symbolic;
system: additive;
system: fixed;

/* Combinaison de valeurs */
system: fixed 3;
system: extends decimal;

cyclic

Le système itère et boucle parmi la liste des symboles fournis. Une fois que la fin de la liste est atteinte, le système reprend au début de la liste. Ce système est pertinent lorsqu'on a un seul symbole ou une liste non numérotée avec des puces. Afin que le style du compteur soit valide, il faut au moins définir un symbole via le descripteur symbols.

fixed

Cette valeur permet de définir un ensemble fini de symboles. Une fois que le système a utilisé les différents symboles, il poursuivra en utilisant le système de secours. Afin que le style du compteur soit valide, il faut qu'au moins un symbole soit défini avec le descripteur symbols. On peut éventuellement ajouter un entier (valeur integer) après le système et qui définit la valeur du premier symbole. La valeur par défaut de ce paramètre (s'il est absent) est 1.

symbolic

Le système itère sur la liste des symboles et à chaque boucle, on double, triple, etc. la représentation. Ainsi, si les symboles fournis sont ◽ et ◾, au cycle suivant, on aura ◽◽ puis ◾◾, ensuite ◽◽◽ et ◾◾◾ et ainsi de suite. Afin que le style du compteur soit valide, il faut définir au moins un symbole avec le descripteur symbols. Ce système de compteur ne fonctionne que pour les valeurs positives.

alphabetic

Le système interprète les symboles comme les chiffres d'un système de numérotation alphabétique. Ainsi, si les lettres a à z sont définies comme symbole dans un style de compteur dont le système est alphabetic, les 26 premières représentations du compteur seront a, b, etc. jusqu'à z (jusqu'ici, le comportement est identique à celui obtenu grâce à symbolic) mais ensuite, le système poursuivra avec aa, ab, ac, etc.

Pour que le style du compteur soit valide, il faut qu'au moins deux symboles soient fournis. Le premier symbole est interprété comme 1, le suivant comme 2 et ainsi de suite. Ce système ne fonctionne que pour les valeurs positives.

numeric

Les symboles sont interprétés comme les chiffres d'un système de notation positionnelle. Ce système est très proche de celui qu'on peut obtenir avec alphabetic sauf que, pour ce dernier, le premier symbole fourni par symbols sera interprété comme 1, le suivant  comme 2 et ainsi de suite alors que pour numeric, le premier symbole est interprété comme 0, le suivant comme 1, puis 2 etc.

Pour que le style de compteur soit valide, il faut qu'au moins deux symboles soient définis avec symbols. Le premier symbole qui est fourni sera interprété comme 0. Comme on peut le voir dans l'exemple ci-après, si on utilise les chiffres de 0 à 9 comme symboles, on obtiendra le même résultat qu'avec le système décimal.

additive

Ce système peut être utilisé pour représenter des systèmes de numérotations additives telles que les chiffres romains qui, plutôt que de réutiliser des chiffres pour obtenir différentes valeurs, définissent des chiffres supplémentaires pour représenter de grandes valeurs. La valeur d'un nombre représenté dans ce sytème est obtenue en sommant les différents chiffres qui le représentent.

Le descripteur supplémentaire additive-symbols doit être utilisé avec au moins un tuple additif pour que le style de compteur soit considéré comme valide. Un tuple additif est composé d'un symbole de compteur et d'un poids entier positif. Les tuples additifs doivent être définis dans l'ordre décroissant de leurs poids afin que le système soit valide.

On voit dans l'exemple ci-après que range est utilisé afin de définir l'intervalle de validité. Une fois en dehors de cet intervalle, on utilisera la représentation classique avec decimal (le style de secours). Si on veut utiliser les chiffres romains, on pourra utiliser les valeurs de style prédéfinies comme upper-roman ou lower-roman afin d'éviter de réinventer la roue.

extends

Ce mot-clé permet aux auteurs d'utiliser l'algorithme d'un autre style de compteur et de modifier ses autres caractéristiques. Si une règle d'un style de compteur utilise le système extends et que certains de ces descripteurs ne font pas définis, leurs valeurs seront prises depuis le style de compteur indiqué. Si le nom du style référencé n'existe pas, le style de secours (décimal) sera utilisé.

Pour que le style de compteur soit valide, il ne doit pas contenir de descripteur symbols ou additive-symbols. Si, selon les différents styles de compteur, on a un cycle de référence (A qui pointe vers B qui pointe vers C qui pointe vers A par exemple), l'agent utilisateur considèrera que tous les styles étendent le style décimal.

Dans l'exemple final, le style de compteur utiliser les valeurs du système de compteur lower-alpha mais retire le point comme suffixe et entour les caractères entre parenthèses (pour obtenir (a) (b) etc).

Syntaxe formelle

cyclic | numeric | alphabetic | symbolic | additive | [fixed <integer>?] | [ extends <counter-style-name> ]
où 
<counter-style-name> = <custom-ident>

Exemples

Utilisation de cyclic

CSS

@counter-style fisheye {
  system: cyclic;
  symbols: ◉;
  suffix: " ";
}

.list {
    list-style: fisheye;
}

HTML

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

Résultat

Utilisation de fixed

CSS

@counter-style circled-digits {
  system: fixed;
  symbols: ➀ ➁ ➂;
  suffix: ' ';
}

.list {
  list-style: circled-digits;
}

HTML

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

Résultat

Utilisation de symbolic

CSS

@counter-style abc {
  system: symbolic;
  symbols: a b c;
  suffix: ". ";
}

.list {
  list-style: abc;
}

HTML

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

Résultat

Utilisation de alphabetic

CSS

@counter-style abc {
  system: alphabetic;
  symbols: a b c;
  suffix: ". ";
}

.list {
  list-style: abc;
}

HTML

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

Résultat

Utilisation de numeric avec des lettres

CSS

@counter-style abc {
  system: numeric;
  symbols: a b c;
  suffix: ". ";
}

.list {
  list-style: abc;
}

HTML

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

Résultat

Utilisation de numeric avec des chiffres

CSS

@counter-style numbers {
  system: numeric;
  symbols: 0 1 2 3 4 5 6 7 8 9;
  suffix: ". ";
}

.list {
  list-style: numbers;
}

HTML

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

Utilisation de additive

CSS

@counter-style upper-roman {
  system: additive;
  range: 1 3999;
  additive-symbols: 1000 M, 900 CM, 500 D, 400 CD, 100 C, 90 XC, 50 L, 40 XL, 10 X, 9 IX, 5 V, 4 IV, 1 I;
}

.list {
  list-style: upper-roman;
}

HTML

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

Résultat

Combinaison avec extends

CSS

@counter-style alpha-modified {
  system: extends lower-alpha;
  prefix: "(";
  suffix: ") ";
}

.list {
  list-style: alpha-modified;
}

HTML

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

Résultat

Spécifications

Compatibilité des navigateurs

Voir aussi

• list-style,
• list-style-image,
• list-style-position,
• symbols(), la notation fonctionnelle utilisée pour créer des styles de compteur anonymes.