symbols

Der symbols CSS Deskriptor der @counter-style Regel wird verwendet, um die Symbole für die Erstellung von Zählerdarstellungen im spezifizierten Zählsystem zu bestimmen. Es ist zwingend erforderlich, diesen Deskriptor anzugeben, wenn der Wert des system Deskriptors cyclic, numeric, alphabetic, symbolic oder fixed ist.

Syntax

css
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 Symbol an, das innerhalb des Zählsystems verwendet werden soll. Jedes Symbol in der Liste kann entweder ein <string>, ein <image>, oder ein <custom-ident> sein. Der <image> Wert kann wiederum entweder als <url> oder <gradient> angegeben werden.

Hinweis: Wenn ein Identifier für ein Symbol verwendet wird, beachten Sie, dass ASCII Nicht-Buchstaben wie *, ", und \ nicht als Identifier gelten. Sie müssen entweder als String zitiert oder escapet werden.

Beschreibung

Ein Symbol kann ein String, Bild oder Identifier sein. Es wird innerhalb der @counter-style 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 zu bestimmen.

Obwohl ein Leerzeichen zwischen zitierten Symbolen nicht erforderlich ist, macht es CSS lesbarer. Um ein Anführungszeichen als Symbol zu verwenden, escapen Sie das Anführungszeichen oder schließen Sie das Zeichen in unterschiedliche Anführungszeichen ein, wie z.B. "'".

Wenn Symbole mit Identifiers statt mit Strings definiert werden, stellen Sie sicher, dass Sie die Syntaxregeln für Identifiers einhalten. Zum Beispiel, wie oben erwähnt, sind ASCII Nicht-Buchstaben wie * keine Identifier und müssen entweder zitiert oder escapet werden. Hex-Escape-Zeichen werden von einem Leerzeichen gefolgt. Dieses Leerzeichen kann wie das Trennzeichen zwischen zwei Identifiers erscheinen, ermöglicht jedoch, dass Ziffern den hex-escapten Zeichen folgen. Dies bedeutet, dass nach einem hex-escapten Identifier zwei Leerzeichen eingefügt werden müssen, um ihn vom nächsten Identifier zu trennen. Es ist besser, den String "\2A 1" zu verwenden als \2A 1 mit zwei Leerzeichen, da Ihre Code-Tools möglicherweise doppelte Leerzeichen entfernen. Es ist allgemein sicherer, Identifier, die escapet werden müssen, zu zitieren oder Strings zu verwenden.

Formale Definition

Zugehörige @-Regel@counter-style
Anfangswertn/a (required)
Berechneter Wertwie angegeben

Formale Syntax

symbols = 
  <symbol>+  

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

<image> = 
  <url>       |
  <gradient>  

<url> = 
  <url()>  |
  <src()>  

<url()> = 
  url( <string> <url-modifier>* )  |
  <url-token>                      

<src()> = 
  src( <string> <url-modifier>* )

Beispiele

Einstellen von Zählersymbolen

In diesem Beispiel enthält die Werteliste für den symbols Deskriptor Buchstaben (A, D, E), eine Zahl in Anführungszeichen ("1") und einen Hex-Escape-Identifier in Anführungszeichen ("\24B7") für das Zeichen Ⓑ.

HTML

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

CSS

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

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

Ergebnis

Spezifikationen

Specification
CSS Counter Styles Level 3
# counter-style-symbols

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch