Die@counter-styleCSSAt-Regel ermöglicht es Ihnen, vordefinierte Listenstile zu erweitern und eigene Zählerstile zu definieren, die nicht Teil des vordefinierten Stilsatzes sind. Die@counter-style Regel enthältDeskriptoren, die definieren, wie der Zählerwert in eine Zeichenketten-Darstellung umgewandelt wird.

Während CSS viele nützliche vordefinierte Zählerstile bereitstellt, bietet die@counter-style At-Regel eine offene Methode zur Erstellung von Zählern. Diese At-Regel bedient die Bedürfnisse der weltweiten Typografie, indem sie Autoren erlaubt, ihre eigenen Zählerstile zu definieren, wenn die vordefinierten Stile nicht ihren Anforderungen entsprechen.

Syntax

@counter-style thumbs {  system: cyclic;  symbols: "\1F44D";  suffix: " ";}

Die@counter-style At-Regel wird durch einenCounter-Style-Namen identifiziert, und der Stil des benannten Zählers kann mit einer<declaration-list>, die aus einem oder mehrerenDeskriptoren und ihren Werten besteht, feinabgestimmt werden.

Counter-Style-Name

<counter-style-name>

Bietet einen Namen für Ihren Zählerstil. Er wird als Groß-/Kleinschreibung beachtendes<custom-ident> ohne Anführungszeichen angegeben. Der Wert sollte nichtnone sein. Wie alle benutzerdefinierten Bezeichner kann der Wert Ihres Zählerstils keinCSS-generisches Schlüsselwort sein. Vermeiden Sie andere aufgezählte CSS-Eigenschaftenwerte, einschließlich der Werte derlisten undCounter-Style Eigenschaften. Der Name Ihres Zählers kann nicht die Groß-/Kleinschreibung nicht beachtendelist-style-type Eigenschaftswerte vondecimal,disc,square,circle,disclosure-open unddisclosure-closed sein.

Hinweis:Die nicht überschreibbaren Zählerstilnamendecimal,disc,square,circle,disclosure-open unddisclosure-closed können nicht als der Name eines benutzerdefinierten Zählers verwendet werden. Sie sind jedoch in anderen Kontexten gültig, in denen der<counter-style-name> Datentyp erwartet wird, wie insystem: extends <counter-style-name>.

Deskriptoren

system

Gibt den zu verwendenden Algorithmus an, um den ganzzahligen Wert eines Zählers in eine Zeichenketten-Darstellung umzuwandeln. Wenn der Wertcyclic,numeric,alphabetic,symbolic oderfixed ist, muss dersymbols Deskriptor ebenfalls angegeben werden. Wenn der Wertadditive ist, muss deradditive-symbols Deskriptor ebenfalls angegeben werden.

symbols

Gibt die Symbole an, die für die Markerdarstellungen verwendet werden sollen. Symbole können Zeichenketten, Bilder oder benutzerdefinierte Bezeichner enthalten. Dieser Deskriptor ist erforderlich, wenn dersystem Deskriptor aufcyclic,numeric,alphabetic,symbolic oderfixed gesetzt ist.

additive-symbols

Definiert dieadditiven Tupel für additive Systeme. Während die imsymbols Deskriptor angegebenen Symbole von den meisten Algorithmen zur Darstellung von Markern verwendet werden, bestehen additive Zählsysteme, wie römische Zahlen, aus einer Reihe von gewichteten Symbolen. Die Deskriptorenliste enthält Zählersymbole zusammen mit ihren nicht-negativen ganzzahligen Gewichten, nach Gewicht in absteigender Reihenfolge aufgelistet. Dieser Deskriptor ist erforderlich, wenn dersystem Deskriptor aufadditive gesetzt ist.

negative

Gibt Symbole an, die der Zählerdarstellung hinzugefügt oder vorangestellt werden, wenn der Wert negativ ist.

prefix

Gibt ein Symbol an, das der Markerdarstellung vorangestellt werden soll. Präfixe werden in der endgültigen Phase zur Darstellung hinzugefügt, vor allen Zeichen, die durch dennegative Deskriptor zu negativen Zählerwerten hinzugefügt wurden.

suffix

Gibt, ähnlich dem Präfix-Deskriptor, ein Symbol an, das der Markerdarstellung hinzugefügt wird. Suffixe kommen nach der Markerdarstellung, einschließlich nach allen Zeichen, die durch dennegative Deskriptor zu negativen Zählerwerten hinzugefügt wurden.

range

Definiert den Bereich von Werten, über die 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, wird der Zählerstil auf seinenfallback-Stil zurückfallen.

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 mit 02, 03, 04 usw. fortfahren, dann ist derpad Deskriptor zu verwenden. Für Darstellungen, die größer als der angegebenepad-Wert sind, wird der Marker wie gewohnt konstruiert.

speak-as

Beschreibt, wie Sprachsynthesizer, wie Bildschirmlesegeräte, den Zählerstil ankündigen sollen. Zum Beispiel kann der Wert des Listenelements als Zahlen oder Alphabete für geordnete Listen oder als Audiohinweise für ungeordnete Listen vorgelesen werden, basierend auf dem Wert dieses Deskriptors.

fallback

Gibt den Zählernamen des Systems an, zu dem gewechselt werden soll, wenn entweder das angegebene System nicht in der Lage ist, die Darstellung eines Zählerwertes zu konstruieren, oder wenn der Zählerwert außerhalb des angegebenenrange liegt. Wenn der Ersatz-Zähler ebenfalls versagt, den Wert darzustellen, dann wird dessen Fallback verwendet, falls eines angegeben ist. Gibt es entweder keine beschriebenen Ersatz-Zähler oder kann die Kette der Ersatzsysteme keinen Zählerwert darstellen, fällt letztlich auf dendecimal Stil zurück.

Formale Syntax

@counter-style =
  @counter-style<counter-style-name> {<declaration-list> }

Beispiele

Symbole mit counter-style spezifizieren

@counter-style circled-alpha {  system: fixed;  symbols: Ⓐ Ⓑ Ⓒ Ⓓ Ⓔ Ⓕ Ⓖ Ⓗ Ⓘ Ⓙ Ⓚ Ⓛ Ⓜ Ⓝ Ⓞ Ⓟ Ⓠ Ⓡ Ⓢ Ⓣ Ⓤ Ⓥ Ⓦ Ⓧ Ⓨ Ⓩ;  suffix: " ";}

Die obige Counter-Style-Regel kann auf Listen wie diese angewendet werden:

.items {  list-style: circled-alpha;}

Der obige Code erzeugt folgendes Ergebnis:

<ol>  <li>one</li>  <li>two</li>  <li>three</li>  <li>four</li>  <li>five</li></ol><p>...</p><ol start="25">  <li>twenty-five</li>  <li>twenty-six</li>  <li>twenty-seven</li>  <li>twenty-eight</li></ol>

Sehen Sie mehr Beispiele auf derDemoseite (Code).

Vorgefertigte Zählerstile

Finden Sie eine Sammlung von über 100counter-style Code-Snippets im DokumentVorgefertigte Zählerstile. Dieses Dokument bietet Zähler, die die Bedürfnisse von Sprachen und Kulturen weltweit erfüllen.

DerZählerstile-Konverter zieht aus dieser Liste, um Code für Zählerstile zu testen und zum Kopieren und Einfügen zu erstellen.

Spezifikationen

Browser-Kompatibilität

Siehe auch

• counter()
• counters()
• symbols()
• list-style,list-style-image,list-style-position,list-style-type
• CSS Counter Styles Modul