range
Baseline 2023
Newly available
Since September 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.
Der range
Deskriptor erlaubt es dem Autor, einen oder mehrere Bereiche von Zählerwerten anzugeben, für die der Stil angewendet wird, wenn benutzerdefinierte Zählerstile mit der @counter-style
At-Regel definiert werden. Wenn der range
Deskriptor eingeschlossen wird, wird der definierte Zähler nur für Werte innerhalb der festgelegten Bereiche verwendet. Liegt der Zählerwert außerhalb des angegebenen Bereichs, wird der Ersatzstil verwendet, um die Darstellung dieses Markers zu konstruieren.
Syntax
/* Keyword value */
range: auto;
/* Range values */
range: 2 5;
range: infinite 10;
range: 6 infinite;
range: infinite infinite;
/* Multiple range values */
range:
2 5,
8 10;
range:
infinite 6,
10 infinite;
Werte
Der Wert ist eine durch Kommas getrennte Liste von Bereichen, die jeweils ein unteres und ein oberes Limit oder das Schlüsselwort auto
enthalten.
auto
-
Die gesamte Menge an Zahlen, die durch das Zähler-
system
darstellbar ist. Diese Bereichswerte hängen vom Zählsystem ab:- Für
cyclic
,numeric
undfixed
Systeme reicht der Bereich von negativerUnendlichkeit
bis zu positiverUnendlichkeit
. - Für
alphabetic
undsymbolic
Systeme reicht der Bereich von1
bis zu positiverUnendlichkeit
. - Für
additive
Systeme reicht der Bereich von0
bis zu positiverUnendlichkeit
. - Wenn
extend
verwendet wird, um ein System zu erweitern, ist der Bereich das, wasauto
für das erweiterte System produzieren würde, einschließlich Erweiterungen komplexer vordefinierter Stile, wie einige japanische, koreanische, chinesische und äthiopische Zählerstile.
- Für
[ [ <integer> | infinite ]{2} ]#
-
Jeder Bereich innerhalb der durch Kommas getrennten Liste von Bereichen umfasst zwei Werte, die jeweils entweder ein
<integer>
oder das Schlüsselwortinfinite
sind. Wenninfinite
als erster Wert in einem Bereich verwendet wird, repräsentiert es negative Unendlichkeit; wenn es als zweiter Wert verwendet wird, repräsentiert es positive Unendlichkeit. Der erste Wert jedes Bereichs ist die untere Grenze für den Bereich und der zweite Wert ist die obere Grenze, einschließlich. Wenn die untere Grenze eines Bereichs in der Liste höher als die obere Grenze ist, ist der gesamterange
Deskriptor ungültig und wird ignoriert.
Beschreibung
Der Wert des range
Deskriptors kann entweder auto
oder eine durch Kommas getrennte Liste von unteren und oberen Bereichsgrenzen sein, die durch negative oder positive Ganzzahlen oder das Schlüsselwort infinite
spezifiziert werden.
Verständnis von auto
Wenn der Wert auf auto
gesetzt ist, ist der Bereich der Standardbereich für das Zählsystem. Wenn das system
cyclic
, numeric
oder fixed
ist, reicht der Bereich von negativer Unendlichkeit bis positiver Unendlichkeit. Wenn das system
alphabetic
oder symbolic
ist, reicht der Bereich von 1
bis positive Unendlichkeit
. Für system: additive
führt auto
zu einem Bereich von 0
bis positive Unendlichkeit
.
Wenn ein Zähler erweitert wird, wird, wenn range
auf auto
gesetzt ist, der Bereichswert der Bereich des system
des Zählers, der erweitert wird, nicht der range
Wert, falls vorhanden, dieses Zählers. Beispielsweise, wenn der Zähler "B" das system: extends A
gesetzt hat, wobei der Zähler ein alphabetic
Zähler ist, setzt range: auto
auf "B" den Bereich von "B" von 1
bis Unendlichkeit
. Dies ist der Bereich des alphabetic
Systems, nicht unbedingt der im Zählerstil "A" gesetzte Bereich. Mit range: auto
auf "B" gesetzt, wird der range
auf den Standardbereich des alphabetic
Systems gesetzt, nicht auf den range
Wert, der im Deskriptorliste des Zählers A festgelegt ist.
Erklärung von infinite
Wenn der Bereich als Ganzzahlen angegeben wird (im Gegensatz zu auto
), kann der Wert infinite
verwendet werden, um Unendlichkeit zu kennzeichnen. Wenn infinite als erster Wert in einem Bereich angegeben ist, wird er als negative Unendlichkeit interpretiert. Wenn er als obere Grenze, der zweite Wert im Bereichspaar, verwendet wird, wird er als positive Unendlichkeit betrachtet.
Liste der Bereiche
Der Wert von range
ist entweder auto
, wie oben besprochen, oder eine durch Kommas getrennte Liste von einem oder mehreren Bereichen. Der Bereich des Zählerstils ist die Vereinigung aller in der Liste definierten Bereiche.
Jeder Bereich in der Liste der Bereiche nimmt zwei Werte an. Diese Werte sind entweder ein <integer>
oder das Schlüsselwort infinite
. Der erste Wert ist die untere Grenze, einschließlich. Der zweite Wert ist die obere Grenze, einschließlich. Bei zwei Ganzzahlen muss der niedrigere Wert zuerst kommen. Wenn die untere Grenze eines Bereichs in der Liste höher als die obere Grenze ist, ist der gesamte range
Deskriptor ungültig und wird ignoriert. Das Schlüsselwort infinite
macht den Bereich nicht ungültig, da die Position von infinite
seinen Wert bestimmt; entweder negative oder positive Unendlichkeit basierend darauf, ob es die untere oder obere Grenze ist.
Formale Definition
Zugehörige @-Regel | @counter-style |
---|---|
Initialer Wert | auto |
Berechneter Wert | wie angegeben |
Formale Syntax
Beispiele
Einstellen des Zählerstils über einen Bereich
HTML
<ul class="list">
<li>One</li>
<li>Two</li>
<li>Three</li>
<li>Four</li>
<li>Five</li>
<li>Six</li>
<li>Seven</li>
<li>Eight</li>
<li>Nine</li>
<li>Ten</li>
</ul>
CSS
@counter-style range-multi-example {
system: cyclic;
symbols: "\25A0" "\25A1";
range:
2 4,
7 9;
}
.list {
list-style: range-multi-example;
}
Ergebnis
Der erste Bereich in der Liste der Bereiche umfasst 2, 3 und 4. Der zweite umfasst 7, 8 und 9. Der Bereich ist die Vereinigung dieser beiden Bereiche, oder 2, 3, 4, 7, 8 und 9.
Spezifikationen
Specification |
---|
CSS Counter Styles Level 3 # counter-style-range |
Browser-Kompatibilität
BCD tables only load in the browser
Siehe auch
- Andere
@counter-style
Deskriptoren:system
,symbols
,additive-symbols
,negative
,prefix
,suffix
,pad
,speak-as
undfallback
list-style
,list-style-image
,list-style-position
symbols()
: die funktionale Notation zur Erstellung anonymer Zählerstile.- CSS counter styles Modul
- CSS lists and counters Modul