@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 des vordefinierten Satzes von Stilen sind. Die @counter-style Regel enthält Deskriptoren, die definieren, wie der Zählerwert in eine String-Darstellung umgewandelt wird.

Während CSS viele nützliche vordefinierte Zählerstile bietet, stellt die @counter-style At-Regel eine offene Methode zur Erstellung von Zählern bereit. Diese At-Regel unterstützt die Bedürfnisse weltweiter Typografie, indem Autoren in der Lage sind, eigene Zählerstile zu definieren, wenn die vordefinierten Stile den Anforderungen nicht entsprechen.

Syntax

css

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

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 deren Werten besteht.

Zählerstilname

<counter-style-name>: Gibt einen Namen für Ihren Zählerstil an. Es wird als fallunterscheidendes <custom-ident> ohne Anführungszeichen spezifiziert. Der Wert sollte nicht none sein. Wie alle benutzerdefinierten Bezeichner darf der Wert Ihres Zählerstils kein CSS-weites Schlüsselwort sein. Vermeiden Sie andere enumerierte CSS Eigenschaftswerte, einschließlich der Werte von list und counter style Eigenschaften. Der Name Ihres Zählers kann nicht einer der fallunabhängigen list-style-type Eigenschaftswerte decimal, disc, square, circle, disclosure-open und disclosure-closed sein.

Hinweis: Die nicht überschreibbaren Zählerstilnamen 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 z.B. in system: extends <counter-style-name>.

Deskriptoren

system: Gibt den Algorithmus an, der zum Umwandeln des ganzzahligen Wertes eines Zählers in eine String-Darstellung verwendet werden soll. 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 Markerdarstellungen verwendet werden sollen. Symbole können Zeichenketten, Bilder oder benutzerdefinierte Bezeichner 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 für die Konstruktion der Markerdarstellung durch die meisten Algorithmen verwendet werden, bestehen additive Zählsysteme, wie römische Ziffern, aus einer Reihe von gewichteten Symbolen. Der Deskriptor ist eine Liste von Zählersymbolen zusammen mit ihren nicht-negativen ganzzahligen Gewichten, in absteigender Reihenfolge nach Gewicht aufgelistet. Dieser Deskriptor ist erforderlich, wenn der system Deskriptor auf additive gesetzt ist.
negative: Gibt Symbole an, die an die Zähldarstellung 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 letzten Phase hinzugefügt, bevor Zeichen hinzugefügt werden, die durch den negative Deskriptor für negative Zählerwerte 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 Zeichen, die durch den negative Deskriptor für negative Zählerwerte 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 durch 02, 03, 04 usw. gehen, dann ist der pad Deskriptor zu verwenden. 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 Listenpunktmarkers 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, zu dem zurückgefallen wird, wenn entweder das angegebene System in der Lage ist, die Darstellung eines Zählerwertes zu konstruieren oder wenn der Zählerwert außerhalb des angegebenen range liegt. Wenn auch der Fallback-Zähler den Wert nicht darstellen kann, dann 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 den Zählerwert nicht darstellen kann, dann 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 angewendet 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 Demoseite (Code).

Fertige Zählerstile

Finden Sie eine Sammlung von über 100 counter-style Code-Snippets im Dokument Vorbereitete Zählerstile. Dieses Dokument bietet Zählerstile, die den Anforderungen von Sprachen und Kulturen weltweit gerecht werden.

Der Zählerstile-Konverter bezieht sich auf diese Liste, um Test- und Kopieren-und-Einfügen-Code für Zählerstile zu erstellen.

Spezifikationen

Specification
CSS Counter Styles Level 3 # the-counter-style-rule