@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.

* Some parts of this feature may have varying levels of support.

Die @counter-style CSS At-Regel ermöglicht es Ihnen, vordefinierte Listenstile zu erweitern und eigene Zählerstile zu definieren, die nicht Teil der vordefinierten Stilsätze sind. Die @counter-style-Regel enthält Beschreibungen, die definieren, wie der Zählerwert in eine String-Darstellung umgewandelt wird.

css

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

ul {
  list-style: thumbs;
}

Während CSS viele nützliche vordefinierte Zählerstile bietet, stellt die @counter-style At-Regel eine flexible Methode für die Erstellung von Zählern zur Verfügung. Diese Regel kommt den Anforderungen der Typografie weltweit entgegen, indem sie Autoren ermöglicht, ihre eigenen Zählerstile zu definieren, wenn die vordefinierten Stile nicht den Anforderungen entsprechen.

Syntax

Die @counter-style At-Regel wird durch einen Zählerstil-Namen identifiziert, und der Stil des benannten Zählers kann über eine <declaration-list> fein abgestimmt werden, die eine oder mehrere Beschreibungen und deren Werte enthält.

Zählerstil-Name

<counter-style-name>: Bietet einen Namen für Ihren Zählerstil. Er wird als case-sensitives <custom-ident> ohne Anführungszeichen angegeben. Der Wert sollte nicht none sein. Wie bei allen benutzerdefinierten Identifikatoren darf der Wert Ihres Zählerstils kein CSS-weites Schlüsselwort sein. Vermeiden Sie andere aufgezählte CSS-Eigenschaftenwerte, einschließlich Werte der list und Zählerstil Eigenschaften. Der Name Ihres Zählers darf nicht die case-insensitiven list-style-type Eigenschaftswerte decimal, disc, square, circle, disclosure-open und disclosure-closed sein.

Hinweis: Die nicht überschreibbaren Zählerstil-Namen decimal, disc, square, circle, disclosure-open und disclosure-closed können nicht als 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 etwa in system: extends <counter-style-name>.

Beschreibungen

system: Gibt den Algorithmus an, der zur Umwandlung des ganzzahligen Werts eines Zählers in eine String-Darstellung verwendet wird. Wenn der Wert cyclic, numeric, alphabetic, symbolic oder fixed ist, muss der symbols-Deskriptor ebenfalls angegeben werden. Wenn der Wert additive ist, muss der additive-symbols-Deskriptor ebenfalls angegeben werden.
symbols: Gibt die Symbole an, die für die Marker-Darstellungen verwendet werden sollen. Symbole können Strings, Bilder oder benutzerdefinierte Identifikatoren enthalten. Dieser Deskriptor ist erforderlich, wenn der system-Deskriptor auf cyclic, numeric, alphabetic, symbolic oder fixed gesetzt ist.
additive-symbols: Definiert die additiven Tupel für additive Systeme. Während die im symbols-Deskriptor angegebenen Symbole von den meisten Algorithmen zur Konstruktion der Marker-Darstellung verwendet werden, bestehen additive Zählsysteme, wie z.B. 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 system-Deskriptor auf additive 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 Endphase zur Darstellung hinzugefügt, vor allen Zeichen, die durch den negative-Deskriptor zu negativen Zählerwerten hinzugefügt werden.
suffix: Gibt ähnlich dem Präfix-Deskriptor ein Symbol an, das der Markerdarstellung angehängt wird. Suffixe kommen nach der Markerdarstellung, einschließlich nach allen Zeichen, die durch den negative-Deskriptor zu negativen Zählerwerten hinzugefügt werden.
range: Definiert den Bereich von Werten, über die der Zählerstil anwendbar ist. Wenn ein Zählerstil verwendet wird, um einen Zählerwert außerhalb der durch diesen Deskriptor definierten Bereiche darzustellen, fällt der Zählerstil auf seinen fallback-Stil zurück.
pad: Wird verwendet, wenn die Markerdarstellungen eine Mindestlänge haben sollen. Wenn Sie zum Beispiel möchten, dass die Zähler bei 01 beginnen und durch 02, 03, 04 usw. gehen, dann soll der pad-Deskriptor verwendet werden. Für Darstellungen, die größer als der angegebene pad-Wert sind, wird der Marker normal konstruiert.
speak-as: Beschreibt, wie Sprachsynthesizer, wie Screenreader, den Zählerstil ansagen sollen. Zum Beispiel kann der Wert des Listenelements als Zahlen oder Buchstaben für geordnete Listen oder als akustische Hinweise für ungeordnete Listen vorgelesen werden, basierend auf dem Wert dieses Deskriptors.
fallback: Gibt den Zählernamen des Systems an, auf das zurückgegriffen werden soll, wenn entweder das angegebene System nicht in der Lage ist, die Darstellung eines Zählerwerts zu konstruieren 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, falls einer angegeben ist. Wenn keine Fallback-Zähler beschrieben sind oder wenn die Kette der Fallback-Systeme nicht in der Lage ist, einen Zählerwert darzustellen, wird letztendlich auf den decimal Stil zurückgegriffen.

Formale Syntax

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

Beispiele

Symbole mit counter-style angeben

css

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

Die obige Zählerstilregel kann auf Listen wie folgt angewandt werden:

css

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

Der obige Code erzeugt das folgende Ergebnis:

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

Weitere Beispiele finden Sie auf der Demo-Seite (Code).

Fertige Zählerstile

Finden Sie eine Sammlung von über 100 counter-style Code-Snippets in dem Ready-made Counter Styles Dokument. Dieses Dokument bietet Zähler, die den Bedürfnissen von Sprachen und Kulturen auf der ganzen Welt entsprechen.

Der Counter styles converter 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