range

Baseline 2023

Newly available

Depuis September 2023, cette fonctionnalité fonctionne sur les appareils et les versions de navigateur les plus récents. Elle peut ne pas fonctionner sur les appareils ou navigateurs plus anciens.

Ledescripteur CSSrange de la règle@counter-style permet à l'auteur·ice de spécifier une ou plusieurs plages de valeurs du compteur pour lesquelles le style est appliqué lors de la définition de styles de compteur personnalisés. Lorsque le descripteurrange est inclus, le compteur défini ne sera utilisé que pour les valeurs comprises dans les plages définies. Si la valeur du compteur est en dehors de la plage spécifiée, le style de repli sera utilisé pour construire la représentation de ce marqueur.

Syntaxe

css

/* 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 compteursystem. Ces valeurs de plage dépendent du système de compteur :

Pour les systèmescyclic,numeric etfixed, la plage va deinfinite négatif àinfinite positif.
Pour les systèmesalphabetic etsymbolic, la plage va de1 àinfinite positif.
Pour les systèmesadditive, la plage va de0 àinfinite positif.
Lorsqu'on utiliseextend pour étendre un système, la plage correspond à ce queauto 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. Siinfinite 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 descripteurrange entier est invalide et sera ignoré.

Description

La valeur du descripteurrange peut être soitauto, 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 surauto, la plage est la plage par défaut du système de compteur. Si lesystem estcyclic,numeric oufixed, la plage va de l'infini négatif à l'infini positif. Si lesystem estalphabetic ousymbolic, la plage va de1 à l'infini positif. Poursystem: additive,auto donne la plage de0 à l'infini positif.

Lorsqu'on étend un compteur, sirange est défini surauto, la valeur de plage sera celle dusystem du compteur étendu, et non la valeurrange, le cas échéant, de ce compteur. Par exemple, si le compteur « B » a lesystem: extends A avec un compteur de typealphabetic, définirrange: auto sur « B » donne à « B » la plage de1 àinfinite. Il s'agit de la plage du systèmealphabetic, pas nécessairement de la plage définie dans le style de compteur « A ». Avecrange: auto sur « B », la plage est celle par défaut du systèmealphabetic, et non la valeurrange 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 parauto), la valeurinfinite peut être utilisée pour désigner l'infini. Siinfinite 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 derange est soitauto (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 laborne inférieure, incluse. La seconde valeur est laborne 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 descripteurrange 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

En lien avec lesrègles @	`@counter-style`
Valeur initiale	`auto`
Valeur calculée	comme défini

Syntaxe formelle

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

<integer> =
<number-token>

Exemples

Définir un style de compteur sur une plage

HTML

html

<ul>  <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

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.