pad

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 Marker-Darstellungen erreichen müssen. Der Wert muss nicht negativ sein. Im Fall des pad Deskriptors wird dieser Wert auch als Pad-Länge bezeichnet.

<symbol>

Gibt das Symbol an, das zum Auffüllen verwendet wird, wenn die durch die <integer> definierte Mindestlänge nicht erreicht wird. Im Fall des pad Deskriptors wird dieser Wert auch als Auffüllsymbol bezeichnet.

Verwenden Sie den pad Deskriptor, wenn die Marker-Darstellungen eine Mindestlänge haben sollen. Wenn eine Marker-Darstellung kürzer als die angegebene Pad-Länge ist, wird die Marker-Darstellung mit dem angegebenen Auffüllsymbol aufgefüllt. Marker-Darstellungen, die länger als die Pad-Länge sind, werden ohne zusätzliches Auffüllen angezeigt.

Der pad Deskriptor nimmt einen <integer> für die minimale Markerlänge und ein <symbol> für die Auffüllung an. Ein häufiger Anwendungsfall des pad Deskriptors ist, wenn Sie eine Liste benötigen, die das Nummerieren bei 01 startet und mit 02, 03, 04 und so weiter fortfährt, anstelle von nur 1, 2, 3 und 4. Indem Sie den pad Deskriptor in diesem Fall als pad: 2 "0" angeben, stellt der Browser sicher, dass der Zähler mindestens zwei Zeichen lang ist und fügt ein Auffüllen mit 0 hinzu, um die Mindestlänge von zwei Zeichen zu erreichen, wo nötig. Zähler, die in diesem Beispiel bereits zwei oder mehr Zeichen lang sind, werden normal ohne Auffüllung angezeigt.

pad = 
  <integer [0,∞]>  &&
  <symbol>         

<symbol> = 
  <string>        |
  <image>         |
  <custom-ident>  

<image> = 
  <url>       |
  <gradient>  

<url> = 
  <url()>  |
  <src()>  

<url()> = 
  url( <string> <url-modifier>* )  |
  <url-token>                      

<src()> = 
  src( <string> <url-modifier>* )  

Dieses Beispiel erweitert das decimal system, um einen Zähler zu erstellen, der mindestens drei Zeichen lang ist, indem kürzere Zähler mit 0 aufgefüllt werden, 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

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