pad

Syntaxe

pad: 3 "0";
pad: "+" 5;

Valeurs

Ce descripteur accepte les deux valeurs suivantes, séparées par un espace et pouvant être spécifiées dans n'importe quel ordre :

<integer>

Spécifie la longueur minimale que toutes les représentations de marqueur doivent atteindre. La valeur doit être positive ou nulle. Pour le descripteur pad, cette valeur est aussi appelée longueur de remplissage.

<symbol>

Spécifie le symbole à utiliser pour le remplissage si la longueur minimale définie par <integer> n'est pas atteinte. Pour le descripteur pad, cette valeur est aussi appelée symbole de remplissage.

Description

Utilisez le descripteur pad lorsque vous souhaitez que les représentations des marqueurs aient une longueur minimale. Si une représentation de marqueur est plus courte que la longueur de remplissage spécifiée, elle sera complétée avec le symbole de remplissage indiqué. Les représentations de marqueur plus longues que la longueur minimale sont affichées sans remplissage supplémentaire.

Le descripteur pad prend un <integer> pour la longueur minimale du marqueur et un <symbol> pour le remplissage. Un cas d'utilisation courant du descripteur pad est lorsque vous souhaitez qu'une liste commence la numérotation par 01, puis 02, 03, 04, etc., au lieu de simplement 1, 2, 3, 4. En spécifiant le descripteur pad comme pad: 2 "0" dans ce cas, le navigateur garantit que le compteur fait au moins deux caractères et ajoute un remplissage avec 0 pour atteindre la longueur minimale de deux caractères si nécessaire. Les compteurs qui ont déjà deux caractères ou plus dans cet exemple seront affichés normalement, sans remplissage.

Définition formelle

Syntaxe formelle

pad = 
  <integer [0,∞]>  &&
  <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

Remplissage d'un compteur

Cet exemple étend le système decimal system pour créer un compteur d'au moins trois caractères, en complétant les compteurs plus courts avec 0 pour atteindre cette longueur minimale. Un descripteur suffix a été ajouté pour rendre le résultat plus lisible.

HTML

<ul>
  <li>Un</li>
  <li>Deux</li>
  <li>Trois</li>
  <li value="40">Quarante</li>
  <li>Quarante et un</li>
  <li value="200">Deux cents</li>
  <li value="3000">Trois mille</li>
  <li>et ainsi de suite</li>
</ul>

CSS

@counter-style pad-example {
  system: extends decimal;
  suffix: ": ";
  pad: 3 "0";
}

ul {
  list-style: pad-example;
}

Résultat

Spécifications

Compatibilité des navigateurs

Voir aussi

• Les descripteurs de @counter-style : system, symbols, additive-symbols, negative, prefix, suffix, range, 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