range

Syntaxe

/* Valeurs avec un mot-clé */
range: auto;

/* Valeurs de plage */
range: 2 5;
range: infinite 10;
range: 6 infinite;
range: infinite infinite;

/* Plusieurs valeurs de plage */
range:
  2 5,
  8 10;
range:
  infinite 6,
  10 infinite;

Valeurs

La valeur est une liste de plages séparées par des virgules, chacune comprenant une limite inférieure et supérieure ou le mot-clé auto.

auto

L'ensemble des nombres représentables par le compteur system. Ces valeurs de plage dépendent du système de compteur :

• Pour les systèmes cyclic, numeric et fixed, la plage va de infinite négatif à infinite positif.
• Pour les systèmes alphabetic et symbolic, la plage va de 1 à infinite positif.
• Pour les systèmes additive, la plage va de 0 à infinite positif.
• Lorsqu'on utilise extend pour étendre un système, la plage correspond à ce que auto produirait pour le système étendu, y compris les extensions de styles prédéfinis complexes, comme certains styles de compteurs japonais, coréens, chinois et éthiopiens.

[ [ <integer> | infinite ]{2} ]#

Chaque plage dans la liste séparée par des virgules comprend deux valeurs, chacune étant soit un <integer> soit le mot-clé infinite. Si infinite est utilisé comme première valeur d'une plage, cela représente l'infini négatif ; s'il est utilisé comme seconde valeur, cela représente l'infini positif. La première valeur de chaque plage est la borne inférieure et la seconde la borne supérieure, incluses. Si la borne inférieure de l'une des plages de la liste est supérieure à la borne supérieure, le descripteur range entier est invalide et sera ignoré.

Description

La valeur du descripteur range peut être soit auto, soit une liste séparée par des virgules de plages avec bornes inférieure et supérieure, spécifiées à l'aide d'entiers négatifs ou positifs ou du mot-clé infinite.

Comprendre auto

Lorsque la valeur est définie sur auto, la plage est la plage par défaut du système de compteur. Si le system est cyclic, numeric ou fixed, la plage va de l'infini négatif à l'infini positif. Si le system est alphabetic ou symbolic, la plage va de 1 à l'infini positif. Pour system: additive, auto donne la plage de 0 à l'infini positif.

Lorsqu'on étend un compteur, si range est défini sur auto, la valeur de plage sera celle du system du compteur étendu, et non la valeur range, le cas échéant, de ce compteur. Par exemple, si le compteur « B » a le system: extends A avec un compteur de type alphabetic, définir range: auto sur « B » donne à « B » la plage de 1 à infinite. Il s'agit de la plage du système alphabetic, pas nécessairement de la plage définie dans le style de compteur « A ». Avec range: auto sur « B », la plage est celle par défaut du système alphabetic, et non la valeur range définie dans la liste des descripteurs du compteur A.

Explication de infinite

Lorsque la plage est spécifiée par des entiers (plutôt que par auto), la valeur infinite peut être utilisée pour désigner l'infini. Si infinite est spécifié comme première valeur d'une plage, il est interprété comme l'infini négatif. S'il est utilisé comme borne supérieure, la seconde valeur de la paire, il est pris comme l'infini positif.

Liste de plages

La valeur de range est soit auto (voir ci-dessus), soit une liste séparée par des virgules d'une ou plusieurs plages. La plage du style de compteur est l'union de toutes les plages définies dans la liste.

Chaque plage de la liste prend deux valeurs. Ces valeurs sont soit un <integer>, soit le mot-clé infinite. La première valeur est la borne inférieure, incluse. La seconde valeur est la borne supérieure, incluse. Pour deux valeurs entières, la valeur la plus basse doit être en premier. Si la borne inférieure de l'une des plages de la liste est supérieure à la borne supérieure, le descripteur range entier est invalide et sera ignoré. Le mot-clé infinite n'invalide pas la plage, car sa position détermine sa valeur : soit l'infini négatif (borne inférieure), soit l'infini positif (borne supérieure).

Définition formelle

Syntaxe formelle

range = 
  [ [ <integer> | infinite ]{2} ]#  |
  auto                              

Exemples

Définir un style de compteur sur une plage

HTML

<ul class="list">
  <li>Un</li>
  <li>Deux</li>
  <li>Trois</li>
  <li>Quatre</li>
  <li>Cinq</li>
  <li>Six</li>
  <li>Sept</li>
  <li>Huit</li>
  <li>Neuf</li>
  <li>Dix</li>
</ul>

CSS

@counter-style range-multi-example {
  system: cyclic;
  symbols: "\25A0" "\25A1";
  range:
    2 4,
    7 9;
}

.list {
  list-style: range-multi-example;
}

Résultat

La première plage est la liste des plages qui inclut 2, 3 et 4. La seconde inclut 7, 8 et 9. La plage est l'union de ces deux plages, soit 2, 3, 4, 7, 8 et 9.

Spécifications

Compatibilité des navigateurs

Voir aussi

• Les descripteurs de @counter-style : system, symbols, additive-symbols, negative, prefix, suffix, pad, speak-as et fallback
• Propriétés de style de liste : list-style, list-style-image, list-style-position
• La fonction symbols() pour créer des styles de compteur anonymes.
• Le module de styles de compteur CSS
• Le module de listes et compteurs CSS