negative
Baseline 2023 Newly available
Since September 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.
Der negative Deskriptor der @counter-style Regel ermöglicht es Ihnen, festzulegen, wie negative Zählerwerte dargestellt werden, wenn benutzerdefinierte Zählerstile definiert werden. Der Wert des negative Deskriptors definiert die Symbole, die vor und nach der Zähldarstellung hinzugefügt werden, wenn der Zählerwert negativ ist.
Syntax
/* One <symbol> value */ negative: "--"; /* Adds '--' before if counter value is negative */ /* Two <symbol> values */ negative: "(" ")"; /* Adds '(- before and ')' after if counter value is negative */ Werte
Der negative Deskriptor akzeptiert bis zu zwei <symbol> Werte.
<symbol>-
Wenn nur ein Wert angegeben wird, wird er hinzugefügt, bevor die Zähldarstellung erfolgt, wenn der Zähler negativ ist. Wenn zwei Werte angegeben werden, wird der erste vor und der zweite nach der Zähldarstellung hinzugefügt, wenn der Zähler negativ ist.
Beschreibung
Wenn der Zählerwert negativ ist, wird das angegebene <symbol> für den negative Deskriptor vor der Zähldarstellung hinzugefügt und ersetzt das Standard-- für negative Werte. Das zweite <symbol>, falls angegeben, wird nach der Zähldarstellung hinzugefügt.
Der negative Deskriptor ist in zwei Fällen relevant: wenn Zählerstile den system Wert symbolic, alphabetic, numeric und additive haben und der Zählerstand negativ ist; und wenn der system Wert extends ist und der erweiterte Zählerstil selbst ein negatives Zeichen verwendet. Für Systeme, die keine negativen Zählerwerte unterstützen, hat die Angabe des negative Deskriptors keine Auswirkung und wird ignoriert.
Formale Definition
Wert in der Datenbank nicht gefunden!Formale Syntax
negative =
<symbol> <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
Anzeige negativer Zähler
Dieses Beispiel erweitert den decimal Listenstil. Der negative Deskriptor wird verwendet, um (- und ) vor und nach negativen Zählerwerten hinzuzufügen.
HTML
<ol start="-3"> <li>Negative three</li> <li>Negative two</li> <li>Negative one</li> <li>Zero</li> <li>One</li> </ol> CSS
@counter-style neg { system: extends decimal; negative: "(-" ")"; suffix: ": "; } ol { list-style: neg; } Ergebnis
Das als Wert des negative Deskriptors angegebene Präfix und Suffix wird nur hinzugefügt, wenn der Zählerwert kleiner als Null ist.
Spezifikationen
| Specification |
|---|
| CSS Counter Styles Level 3 # counter-style-system |
Browser-Kompatibilität
Siehe auch
@counter-styleDeskriptoren:system,symbols,additive-symbols,prefix,suffix,range,pad,speak-as,fallback- Listenstil-Eigenschaften:
list-style,list-style-image,list-style-position symbols()Funktion zur Erstellung anonymer Zählerstile- CSS-Zählerstile Modul
- CSS-Listen und Zähler Modul