@counter-style
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.
Die @counter-style
CSS At-Regel erlaubt es Ihnen, vordefinierte Listenstile zu erweitern und eigene Zählerstile zu definieren, die nicht Teil des vordefinierten Stilsatzes sind. Die @counter-style
Regel enthält Deskriptoren, die definieren, wie der Zählerwert in eine String-Darstellung umgewandelt wird.
@counter-style thumbs {
system: cyclic;
symbols: "\1F44D";
suffix: " ";
}
ul {
list-style: thumbs;
}
Obwohl CSS viele nützliche vordefinierte Zählerstile bietet, bietet die @counter-style
At-Regel eine offene Methode zur Erstellung von Zählern. Diese At-Regel geht auf die Bedürfnisse der weltweiten Typografie ein, indem sie Autoren erlaubt, ihre eigenen Zählerstile zu definieren, wenn die vordefinierten Stile nicht ihren Anforderungen entsprechen.
Syntax
Die @counter-style
At-Regel wird durch einen Zählerstilnamen identifiziert, und der Stil des benannten Zählers kann mit einer <declaration-list>
fein abgestimmt werden, die aus einem oder mehreren Deskriptoren und ihren Werten besteht.
Zählerstilname
<counter-style-name>
-
Bietet einen Namen für Ihren Zählerstil. Es wird als case-sensitives
<custom-ident>
ohne Anführungszeichen angegeben. Der Wert sollte nicht gleichnone
sein. Wie bei allen benutzerdefinierten Bezeichnern kann der Wert Ihres Zählerstils kein CSS-weiter Schlüsselwort sein. Vermeiden Sie andere aufgezählte CSS-Eigenschaftswerte, einschließlich Werte von list und counter style Eigenschaften. Der Name Ihres Zählers kann nicht gleich den case-insensitivenlist-style-type
Eigenschaftswertendecimal
,disc
,square
,circle
,disclosure-open
unddisclosure-closed
sein.Hinweis: Die nicht überschreibbaren Zählerstilnamen
decimal
,disc
,square
,circle
,disclosure-open
unddisclosure-closed
können nicht als Name eines benutzerdefinierten Zählers verwendet werden. Sie sind jedoch in anderen Kontexten gültig, in denen der Daten Typ<counter-style-name>
erwartet wird, z. B. insystem: extends <counter-style-name>
.
Deskriptoren
system
-
Gibt den Algorithmus an, der zur Umwandlung des ganzzahligen Wertes eines Zählers in eine String-Darstellung verwendet wird. Wenn der Wert
cyclic
,numeric
,alphabetic
,symbolic
oderfixed
ist, muss auch der Deskriptorsymbols
angegeben werden. Wenn der Wertadditive
ist, muss der Deskriptoradditive-symbols
ebenfalls angegeben werden. symbols
-
Legt die Symbole fest, die für die Markerdarstellungen verwendet werden sollen. Symbole können Strings, Bilder oder benutzerdefinierte Bezeichner enthalten. Dieser Deskriptor ist erforderlich, wenn der Deskriptor
system
aufcyclic
,numeric
,alphabetic
,symbolic
oderfixed
gesetzt ist. additive-symbols
-
Definiert die additiven Tupel für additive Systeme. Während die im Deskriptor
symbols
angegebenen Symbole für die Konstruktion der Markerdarstellung durch die meisten Algorithmen verwendet werden, bestehen additive Zähler Systeme, wie römische Zahlen, aus einer Reihe von gewichteten Symbolen. Der Deskriptor ist eine Liste von Zählersymbolen zusammen mit ihren nicht-negativen ganzzahligen Gewichten, aufgelistet nach Gewicht in absteigender Reihenfolge. Dieser Deskriptor ist erforderlich, wenn der Deskriptorsystem
aufadditive
gesetzt ist. negative
-
Gibt Symbole an, die an die Zählerdarstellung angehängt oder vorangestellt werden sollen, wenn der Wert negativ ist.
prefix
-
Gibt ein Symbol an, das der Markerdarstellung vorangestellt werden soll. Präfixe werden der Darstellung in der Endphase hinzugefügt, vor allen Zeichen, die durch den Deskriptor
negative
hinzugefügt werden. suffix
-
Gibt, ähnlich wie der Präfix-Deskriptor, ein Symbol an, das der Markerdarstellung nachgestellt wird. Suffixe kommen nach der Markerdarstellung, einschließlich nach allen Zeichen, die durch den Deskriptor
negative
hinzugefügt werden. range
-
Definiert den Wertebereich, über den der Zählerstil anwendbar ist. Wenn ein Zählerstil verwendet wird, um einen Zählerwert darzustellen, der außerhalb der durch diesen Deskriptor definierten Bereiche liegt, fällt der Zählerstil auf seinen
fallback
Stil zurück. pad
-
Wird verwendet, wenn Sie möchten, dass die Markerdarstellungen eine Mindestlänge haben. Wenn Sie beispielsweise möchten, dass die Zähler bei 01 beginnen und über 02, 03, 04 usw. gehen, dann muss der Deskriptor
pad
verwendet werden. Für Darstellungen, die größer als der angegebenepad
Wert sind, wird der Marker normal konstruiert. speak-as
-
Beschreibt, wie Sprachsynthesizer, wie Bildschirmlesegeräte, den Zählerstil ankündigen sollten. Zum Beispiel kann der Wert des Listenmarkierers als Zahlen oder Buchstaben für geordnete Listen oder als akustische Signale für ungeordnete Listen vorgelesen werden, basierend auf dem Wert dieses Deskriptors.
fallback
-
Gibt den Namen des Zählerstils an, auf den zurückgegriffen werden soll, wenn entweder das angegebene System die Darstellung eines Zählerwertes nicht konstruieren kann oder wenn der Zählerwert außerhalb des angegebenen
range
liegt. Wenn auch der Fallback-Zähler den Wert nicht darstellen kann, wird der Fallback dieses Zählers verwendet, wenn einer angegeben ist. Wenn weder Fallback-Zähler beschrieben sind noch die Kette von Fallback-Systemen den Zählerwert darstellen kann, wird letztendlich auf dendecimal
Stil zurückgegriffen.
Formale Syntax
@counter-style =
@counter-style <counter-style-name> { <declaration-list> }
Beispiele
Symbole mit counter-style angeben
@counter-style circled-alpha {
system: fixed;
symbols: Ⓐ Ⓑ Ⓒ Ⓓ Ⓔ Ⓕ Ⓖ Ⓗ Ⓘ Ⓙ Ⓚ Ⓛ Ⓜ Ⓝ Ⓞ Ⓟ Ⓠ Ⓡ Ⓢ Ⓣ Ⓤ Ⓥ Ⓦ Ⓧ Ⓨ Ⓩ;
suffix: " ";
}
Die obige Zählerstilregel kann auf Listen wie diese angewendet werden:
.items {
list-style: circled-alpha;
}
Der obige Code erzeugt folgendes Ergebnis:
Fertige Zählerstile
Finden Sie eine Sammlung von über 100 counter-style
Codefragmenten im Dokument Fertige Zählerstile. Dieses Dokument bietet Zähler, die den Bedürfnissen von Sprachen und Kulturen auf der ganzen Welt entsprechen.
Der Zählerstil-Konverter zieht aus dieser Liste, um Code für Zählerstile zu testen und zu erstellen, der kopiert und eingefügt werden kann.
Spezifikationen
Specification |
---|
CSS Counter Styles Level 3 # the-counter-style-rule |
Browser-Kompatibilität
BCD tables only load in the browser