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

Während CSS viele nützliche vordefinierte Zählstile bietet, stellt die@counter-style At-Regel eine offene Methode bereit, um Zähler zu erstellen. Diese At-Regel berücksichtigt die Bedürfnisse der weltweiten Typografie, indem sie Autoren ermöglicht, ihre eigenen Zählstile zu definieren, wenn die vordefinierten Stile nicht den Anforderungen entsprechen.

Syntax

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

Die@counter-style At-Regel wird durch einenZählstilnamen identifiziert, und der Stil des benannten Zählers kann mit Hilfe einer<declaration-list> fein abgestimmt werden, die aus einem oder mehrerenDeskriptoren und deren Werten besteht.

Zählstilname

<counter-style-name>

Gibt Ihrem Zählstil einen Namen. Es wird als case-sensitiver<custom-ident> ohne Anführungszeichen angegeben. Der Wert sollte nicht gleichnone sein. Wie bei allen benutzerdefinierten Identifikatoren darf der Wert Ihres Zählstils keinCSS-weiter Schlüsselwort sein. Vermeiden Sie andere aufgelistete CSS-Eigenschaftswerte, einschließlich der Werte derlist undcounter style Eigenschaften. Der Name Ihres Zählers darf nicht den case-insensitivlist-style-type Eigenschaftswertendecimal,disc,square,circle,disclosure-open unddisclosure-closed entsprechen.

Hinweis:Die nicht überschreibbaren Zählstilenamendecimal,disc,square,circle,disclosure-open unddisclosure-closed dürfen 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 zum Beispiel insystem: extends <counter-style-name>.

Deskriptoren

system

Gibt den Algorithmus an, der verwendet werden soll, um den ganzzahligen Wert eines Zählers in eine Zeichenfolgendarstellung 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 Zeichenfolgen, 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 in demsymbols Deskriptor angegebenen Symbole für die Konstruktion der Markerdarstellung von den meisten Algorithmen verwendet werden, bestehen additive Zählsysteme, wie z.B. römische Ziffern, aus einer Reihe von gewichteten Symbolen. Die Deskriptoren sind eine Liste von Zählersymbolen zusammen mit ihren nicht-negativen Ganzzahlgewichten, die nach Gewicht in absteigender Reihenfolge aufgelistet sind. Dieser Deskriptor ist erforderlich, wenn dersystem Deskriptor aufadditive 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 in der letzten Phase zur Darstellung hinzugefügt, bevor Zeichen, die durch dennegative Deskriptor für negative Zählerwerte hinzugefügt wurden, hinzugefügt werden.

suffix

Gibt, ähnlich dem Präfix-Deskriptor, ein Symbol an, das an die Markerdarstellung angehängt wird. Suffixe kommen nach der Markerdarstellung, einschließlich nachdem Zeichen hinzugefügt wurden, die durch dennegative Deskriptor für negative Zählerwerte hinzugefügt wurden.

range

Definiert den Bereich von Werten, über die der Zählstil anwendbar ist. Wenn ein Zählstil verwendet wird, um einen Zählerwert darzustellen, der außerhalb der durch diesen Deskriptor definierten Bereiche liegt, fällt der Zählstil auf seinenfallback 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 ist derpad Deskriptor zu verwenden. Bei Darstellungen, die größer als der angegebenepad Wert sind, wird der Marker wie gewohnt konstruiert.

speak-as

Beschreibt, wie Sprachsynthesizer, wie Bildschirmleser, den Zählstil ankündigen sollen. Beispielsweise kann der Wert des Listenpunktmarkers als Zahlen oder Alphabete für geordnete Listen oder als Audiocues für ungeordnete Listen vorgelesen werden, basierend auf dem Wert dieses Deskriptors.

fallback

Gibt den Zählernamen des Systems an, auf den zurückgegriffen 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 auch der Fallback-Zähler den Wert nicht darstellen kann, wird auf den Fallback dieses Zählers zurückgegriffen, wenn einer angegeben ist. Wenn keine Fallback-Zähler beschrieben sind oder wenn die Kette von Fallback-Systemen nicht in der Lage ist, einen Zählerwert darzustellen, wird letztendlich auf dendecimal Stil zurückgegriffen.

Formale Syntax

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

<counter-style-name> =
<custom-ident>

Beispiele

Symbole mit Zählstil spezifizieren

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

Die obige Zählstilregel kann auf Listen wie folgt angewendet werden:

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

Der obige Code erzeugt das folgende 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 derDemo-Seite (Code).

Fertige Zählstile

Finden Sie eine Sammlung von über 100counter-style Code-Snippets im DokumentFertige Zählstile. Dieses Dokument bietet Zähler, die den Bedürfnissen von Sprachen und Kulturen weltweit gerecht werden.

DerZählstilkonverter zieht aus dieser Liste, um Test- und Copy-and-Paste-Code für Zählstile zu erstellen.

Spezifikationen

Browser-Kompatibilität

Siehe auch

• counter()
• counters()
• symbols()
• list-style,list-style-image,list-style-position,list-style-type
• CSS-Zählstile Modul