pad

Syntax

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

Werte

Der Deskriptor akzeptiert die folgenden zwei Werte, die durch ein Leerzeichen getrennt sind und in beliebiger Reihenfolge angegeben werden können:

<integer>

Gibt die Mindestlänge an, die alle Markerdarstellungen erreichen müssen. Der Wert muss nicht-negativ sein. Im Falle des pad Deskriptors wird dieser Wert auch als pad length bezeichnet.

<symbol>

Gibt das Symbol an, das als Füllzeichen verwendet werden soll, falls die durch <integer> definierte Mindestlänge nicht erreicht wird. Im Falle des pad Deskriptors wird dieser Wert auch als padding symbol bezeichnet.

Beschreibung

Verwenden Sie den pad Deskriptor, wenn Sie möchten, dass die Markerdarstellungen eine Mindestlänge haben. Wenn eine Markerdarstellung kürzer als die angegebene Pad-Länge ist, wird die Markerdarstellung mit dem angegebenen Füllsymbol aufgefüllt. Markerdarstellungen, die länger als die Pad-Länge sind, werden ohne zusätzliche Auffüllung angezeigt.

Der pad Deskriptor verwendet ein <integer> für die minimale Markerlänge und ein <symbol> für die Auffüllung. Ein häufiger Anwendungsfall des pad Deskriptors ist, wenn eine Liste mit 01 anfangen und mit 02, 03, 04 usw. fortfahren soll, anstatt nur 1, 2, 3 und 4. Indem Sie pad Deskriptor als pad: 2 "0" angeben, sorgt der Browser dafür, dass der Zähler mindestens zwei Zeichen lang ist und fügt 0 als Auffüllung hinzu, um die minimale Länge von zwei Zeichen zu erreichen, wenn nötig. Zähler, die in diesem Beispiel bereits zwei oder mehr Zeichen lang sind, werden normal ohne Auffüllung angezeigt.

Formale Definition

Formale Syntax

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>  

Beispiele

Auffüllen eines Zählers

Dieses Beispiel erweitert das decimal system, um einen Zähler zu erstellen, der mindestens drei Zeichen lang ist, und kürzere Zähler mit 0 aufzufüllen, um diese Mindestlänge zu erreichen. Ein suffix Deskriptor wurde hinzugefügt, um die Ausgabe lesbarer zu machen.

HTML

<ul>
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li value="40">Forty</li>
  <li>Forty-one</li>
  <li value="200">Two hundred</li>
  <li value="3000">Three thousand</li>
  <li>and so on</li>
</ul>

CSS

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

ul {
  list-style: pad-example;
}

Ergebnis

Spezifikationen

Browser-Kompatibilität

Siehe auch

• @counter-style Deskriptoren: system, symbols, additive-symbols, negative, prefix, suffix, range, speak-as, fallback
• Listeneigenschaften: list-style, list-style-image, list-style-position
• symbols() Funktion, um anonyme Zählerstile zu erstellen
• CSS-Zählerstile Modul
• CSS-Listen und Zähler Modul