symbols

Syntax

symbols: A B C D E;
symbols: "\24B6" "\24B7" "\24B8" D E;
symbols: "0" "1" "2" "4" "5" "6" "7" "8" "9";
symbols: url("one.svg") url("two.svg") url("three.svg");
symbols: indic-numbers;

Werte

Der symbols-Deskriptor wird als Liste von einem oder mehreren durch Leerzeichen getrennten <symbol>-Werten angegeben.

<symbol>

Gibt das zu verwendende Symbol im Zählsystem an. Jedes Symbol in der Liste kann entweder ein <string>, ein <image> oder ein <custom-ident> sein. Der <image>-Wert kann wiederum als <url> oder <gradient> angegeben werden.

Beschreibung

Ein Symbol kann eine Zeichenfolge, ein Bild oder ein Identifier sein. Es wird innerhalb der @counter-style At-Regel verwendet.

Wenn der Wert des system-Deskriptors cyclic, numeric, alphabetic, symbolic oder fixed ist, muss der symbols-Deskriptor angegeben werden. Für das additive System verwenden Sie stattdessen den additive-symbols-Deskriptor, um die Symbole festzulegen.

Obwohl ein Leerzeichen zwischen in Anführungszeichen gesetzten Symbolen nicht erforderlich ist, macht es CSS lesbarer. Um ein Anführungszeichen als Symbol zu verwenden, maskieren Sie entweder das Anführungszeichenzeichen oder setzen Sie das Zeichen in verschiedene Anführungszeichen, wie z. B. "'".

Beim Definieren von Symbolen mit Identifikatoren anstelle von Zeichenfolgen achten Sie darauf, die Syntaxregeln für Identifikatoren zu verwenden. Zum Beispiel, wie oben erwähnt, sind ASCII-Nicht-Buchstaben wie * keine Identifikatoren und müssen entweder in Anführungszeichen gesetzt oder maskiert werden. Hex-Escape-Zeichen werden durch ein Leerzeichen gefolgt. Dieses Leerzeichen kann wie das Leerzeichen aussehen, das zwei Identifikatoren trennt, ermöglicht jedoch, dass Ziffern auf hex-maskierte Zeichen folgen. Dies bedeutet, dass zwei Leerzeichen nach einem hex-maskierten Identifier eingefügt werden müssen, um ihn vom nächsten Identifier zu trennen. Zum Beispiel ist es besser, die Zeichenfolge "\2A 1" anstelle von \2A 1 mit zwei Leerzeichen zu verwenden, da Ihre Code-Tools möglicherweise doppelte Leerzeichen entfernen. Es ist im Allgemeinen sicherer, Identifikatoren, die maskiert werden müssen, in Anführungszeichen zu setzen oder Zeichenfolgen zu verwenden.

Formale Definition

Formale Syntax

symbols = 
  <symbol>+  

<symbol> = 
  <string>        |
  <image>         |
  <custom-ident>  

<image> = 
  <url>           |
  <image()>       |
  <image-set()>   |
  <cross-fade()>  |
  <element()>     |
  <gradient>      

<image()> = 
  image( <image-tags>? [ <image-src>? , <color>? ]! )  

<image-set()> = 
  image-set( <image-set-option># )  

<cross-fade()> = 
  cross-fade( <cf-image># )  

<element()> = 
  element( <id-selector> )  

<image-tags> = 
  ltr  |
  rtl  

<image-src> = 
  <url>     |
  <string>  

<image-set-option> = 
  [ <image> | <string> ] [ <resolution> || type( <string> ) ]?  

<cf-image> = 
  [ <image> | <color> ]  &&
  <percentage [0,100]>?  

<id-selector> = 
  <hash-token>  

Beispiele

Festlegen von Zählersymbolen

In diesem Beispiel umfasst die Liste der Werte für den symbols-Deskriptor Buchstaben (A, D, E), eine Zahl in Anführungszeichen ("1") und einen hex-maskierten Identifier in Anführungszeichen ("\24B7") für das Zeichen Ⓑ.

HTML

<ul class="list">
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
  <li>Five</li>
</ul>

CSS

@counter-style symbols-example {
  system: fixed;
  symbols: A "1" "\24B7" D E;
}

.list {
  list-style: symbols-example;
}

Ergebnis

Spezifikationen

Browser-Kompatibilität

Siehe auch

• @counter-style-Deskriptoren: system, additive-symbols, negative, prefix, suffix, range, pad, speak-as, fallback
• Listenstil-Eigenschaften: list-style, list-style-image, list-style-position
• symbols()-Funktion
• <url>-Typ
• CSS-Zählerstile Modul