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 Symbol an, das im Zählsystem verwendet werden soll. 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 ein String, Bild oder Identifier sein. Es wird in 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 anzugeben.

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

Beim Definieren von Symbolen mit Identifikatoren anstelle von Strings, achten Sie darauf, die Identifikatorsyntax-Regeln zu verwenden. Zum Beispiel, wie oben erwähnt, sind ASCII Nicht-Buchstaben wie * keine Identifikatoren und müssen entweder zitiert oder maskiert werden. Hex-Codierungen folgen einem Leerzeichen. Dieses Leerzeichen kann wie das Leerzeichen wirken, das zwei Identifikatoren trennt, aber es ermöglicht Ziffern, den hex-kodierten Zeichen zu folgen. Das bedeutet, dass zwei Leerzeichen nach einem hex-kodierten Identifikator eingefügt werden müssen, um ihn vom nächsten Identifikator zu trennen. Zum Beispiel ist es besser, den String "\2A 1" anstelle von \2A 1 mit zwei Leerzeichen zu verwenden, da Ihre Code-Werkzeuge doppelte Leerzeichen entfernen könnten. Es ist im Allgemeinen sicherer, Identifikatoren zu zitieren, die maskiert werden müssen, oder Strings 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

Zählersymbole festlegen

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 Identifikator 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
• Listeneigenschaften: list-style, list-style-image, list-style-position
• symbols() Funktion
• <url> Typ
• CSS Zählerstile Modul