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 @-Regel @counter-style ermöglicht es Ihnen, zu definieren, 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ählerdarstellung hinzugefügt werden, wenn der Zählerwert negativ ist.

Syntax

css
/* 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 vor der Zählerdarstellung hinzugefügt, wenn der Zähler negativ ist. Wenn zwei Werte angegeben werden, wird der erste vor und der zweite nach der Zählerdarstellung hinzugefügt, wenn der Zähler negativ ist.

Beschreibung

Falls der Zählerwert negativ ist, wird das angegebene <symbol> für den negative Deskriptor vor der Zählerdarstellung hinzugefügt und ersetzt das Standard-- für negative Werte. Das zweite <symbol>, falls angegeben, wird nach der Zählerdarstellung hinzugefügt.

Der negative Deskriptor ist in zwei Fällen relevant: Wenn Zählerstile den system-Wert von symbolic, alphabetic, numeric und additive haben und der Zähler negativ ist; und wenn der system-Wert extends ist und der erweiterte Zählerstil das negative Zeichen selbst verwendet. Für Systeme, die keine negativen Zählerwerte unterstützen, hat die Angabe des negative Deskriptors keine Wirkung und wird ignoriert.

Formale Definition

Zugehörige @-Regel@counter-style
Initialer Wert"-" hyphen-minus
Berechneter Wertwie angegeben

Formaler Syntax

negative = 
  <symbol> <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

Darstellung 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

html
<ol start="-3">
  <li>Negative three</li>
  <li>Negative two</li>
  <li>Negative one</li>
  <li>Zero</li>
  <li>One</li>
</ol>

CSS

css
@counter-style neg {
  system: extends decimal;
  negative: "(-" ")";
  suffix: ": ";
}

ol {
  list-style: neg;
}

Ergebnis

Das Präfix und Suffix, die als Wert des negative Deskriptors gelistet sind, werden dem Marker nur hinzugefügt, wenn der Zählerwert kleiner als null ist.

Spezifikationen

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

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch