symbols
Der symbols
CSS-Deskriptor der @counter-style
-Regel wird verwendet, um die Symbole für die Erstellung von Zählerdarstellungen im angegebenen Zählersystem festzulegen. Das Festlegen dieses Deskriptors ist erforderlich, wenn der Wert des Deskriptors system
cyclic
, numeric
, alphabetic
, symbolic
oder fixed
ist.
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 Deskriptor symbols
wird als eine Liste aus einem oder mehreren durch Leerzeichen getrennten <symbol>
-Werten angegeben.
<symbol>
-
Gibt das Symbol an, das im Zählersystem 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.
Hinweis:
Bei der Verwendung eines Identifiers für ein Symbol beachten Sie, dass ASCII-Nicht-Buchstaben wie *
, "
, und \
nicht als Identifier gelten. Sie müssen entweder als Zeichenkette in Anführungszeichen gesetzt oder maskiert werden.
Beschreibung
Ein Symbol kann eine Zeichenkette, ein Bild oder ein Identifier sein. Es wird innerhalb der @counter-style
-Regel at-rule verwendet.
Wenn der Wert des Deskriptors system
cyclic
, numeric
, alphabetic
, symbolic
oder fixed
ist, muss der Deskriptor symbols
angegeben werden. Für das additive
-System verwenden Sie stattdessen den Deskriptor additive-symbols
, um die Symbole anzugeben.
Während ein Leerzeichen zwischen zitierten Symbolen nicht erforderlich ist, verbessert es die Lesbarkeit von CSS. Um ein Anführungszeichen als Symbol zu verwenden, maskieren Sie entweder das Anführungszeichen oder schließen Sie das Zeichen in andere Anführungszeichen ein, z. B. "'"
.
Wenn Sie Symbole mit Identifiers anstelle von Zeichenketten definieren, beachten Sie die Syntaxregeln für Identifiers. Zum Beispiel, wie oben erwähnt, sind ASCII-Nicht-Buchstaben wie *
keine Identifiers und müssen entweder zitiert oder maskiert werden. Hexadecimal maskierte Zeichen werden von einem Leerzeichen gefolgt. Dieses Leerzeichen könnte wie der Abstand wirken, der zwei Identifiers trennt, ermöglicht aber, dass Ziffern den hexadecimaleskapierten Zeichen folgen können. Das bedeutet, dass zwei Leerzeichen nach einem hexadecimaleskapierten Identifier eingeschlossen werden müssen, um ihn vom nächsten Identifier zu trennen. Es ist zum Beispiel besser, die Zeichenkette "\2A 1"
anstelle von \2A 1
mit zwei Leerzeichen zu verwenden, da Ihre Codewerkzeuge doppelte Leerzeichen entfernen könnten. Es ist generell sicherer, Identifier, die maskiert werden müssen, zu zitieren oder Zeichenketten zu verwenden.
Formale Definition
Zugehörige @-Regel | @counter-style |
---|---|
Anfangswert | n/a (required) |
Berechneter Wert | wie 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
Festlegen von Zählersymbolen
In diesem Beispiel umfasst die Liste der Werte für den Deskriptor symbols
Buchstaben (A
, D
, E
), eine Zahl in Anführungszeichen ("1"
) und einen hexadecimaleskapierten 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
Specification |
---|
CSS Counter Styles Level 3 # counter-style-symbols |
Browser-Kompatibilität
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
symbols |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
- Partial support
- Partial support
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