negative

Syntaxe

/* Une valeur <symbol> */
negative: "--"; /* Ajoute '--' avant si la valeur du compteur est négative */

/* Deux valeurs <symbol> */
negative: "(" ")"; /* Ajoute '(-' avant et ')' après si la valeur du compteur est négative */

Valeurs

Le descripteur negative accepte jusqu'à deux valeurs <symbol>.

<symbol>

Si une seule valeur est spécifiée, elle est ajoutée avant la représentation du compteur lorsque celui-ci est négatif. Si deux valeurs sont spécifiées, la première est ajoutée avant et la seconde après la représentation du compteur lorsque celui-ci est négatif.

Description

Si la valeur du compteur est négative, le <symbol> spécifié pour le descripteur negative est ajouté avant la représentation du compteur, remplaçant le - par défaut pour les valeurs négatives. Le second <symbol>, s'il est spécifié, est ajouté après la représentation du compteur.

Le descripteur negative est pertinent dans deux cas : si les styles de compteur ont la valeur system de symbolic, alphabetic, numeric ou additive et que le compteur est négatif ; et si la valeur system est extends et que le style de compteur étendu utilise lui-même un signe négatif. Pour les systèmes qui ne prennent pas en charge les valeurs négatives, la spécification du descripteur negative n'a aucun effet et est ignorée.

Définition formelle

Syntaxe formelle

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>  

Exemples

Rendu des compteurs négatifs

Cet exemple étend le style de liste decimal. Le descripteur negative est utilisé pour ajouter (- et ) avant et après les valeurs négatives du compteur.

HTML

<ol start="-3">
  <li>Trois négatif</li>
  <li>Deux négatif</li>
  <li>Un négatif</li>
  <li>Zéro</li>
  <li>Un</li>
</ol>

CSS

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

ol {
  list-style: neg;
}

Résultat

Le préfixe et le suffixe indiqués comme valeur du descripteur negative ne sont ajoutés au marqueur que lorsque la valeur du compteur est inférieure à zéro.

Spécifications

Compatibilité des navigateurs

Voir aussi

• Les descripteurs de @counter-style : system, symbols, additive-symbols, prefix, suffix, range, pad, speak-as et fallback
• Propriétés de style de liste : list-style, list-style-image, list-style-position
• La fonction symbols() pour créer des styles de compteur anonymes.
• Le module de styles de compteur CSS
• Le module de listes et compteurs CSS