pad

Der Deskriptor akzeptiert die folgenden zwei Werte, die durch ein Leerzeichen getrennt 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 Fall des pad Deskriptors ist dieser Wert auch als Polsterlänge bekannt.

<symbol>

Gibt das Symbol an, das für das Polstern verwendet werden soll, wenn die durch den <integer> definierte Mindestlänge nicht erreicht wird. Im Fall des pad Deskriptors ist dieser Wert auch als Polster-Symbol bekannt.

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

Der pad Deskriptor nimmt ein <integer> für die minimale Marker-Länge und ein <symbol> für das Polstern. Ein gängiger Anwendungsfall für den pad Deskriptor ist, wenn Sie möchten, dass eine Liste mit der Nummerierung 01 beginnt und mit 02, 03, 04 usw. fortfährt, anstatt einfach 1, 2, 3 und 4. Indem Sie in diesem Fall den pad Deskriptor als pad: 2 "0" angeben, stellt der Browser sicher, dass der Zähler mindestens zwei Zeichen lang ist und fügt ein Polster mit 0 hinzu, um die minimale Zweizahligkeit zu erreichen, wo dies erforderlich ist. Zähler, die in diesem Beispiel bereits zwei oder mehr Zeichen lang sind, werden normal ohne Polstern 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
• Listeneigenschaften: 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