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

css

@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 gleich none 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-insensitiven list-style-type Eigenschaftswerten 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 Daten Typ <counter-style-name> erwartet wird, z. B. in system: 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 oder fixed ist, muss auch der Deskriptor symbols angegeben werden. Wenn der Wert additive ist, muss der Deskriptor additive-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 auf cyclic, numeric, alphabetic, symbolic oder fixed 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 Deskriptor system auf additive 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 angegebene pad 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 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 diese angewendet werden:

css

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

Der obige Code erzeugt folgendes 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>

Sehen Sie mehr Beispiele auf der Demoseite (Code).

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 with JavaScript enabled. Enable JavaScript to view data.