pad CSS @-Regel-Deskriptor

Syntax

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

Werte

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 wird dieser Wert auch als Pad-Länge bezeichnet.

<symbol>

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

Beschreibung

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

Der pad-Deskriptor nimmt ein <integer> für die minimale Markerlänge und ein <symbol> für das Auffüllen. Ein häufiges Anwendungsbeispiel des pad-Deskriptors ist, wenn Sie möchten, dass eine Liste mit der Nummerierung von 01 beginnt und durch 02, 03, 04 usw. fortgesetzt wird, anstatt 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 zur Erreichung der Mindestlänge von zwei Zeichen bei Bedarf eine Auffüllung mit 0 hinzu. 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>         

<integer> = 
  <number-token>  

<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 zu einem Zähler, der mindestens drei Zeichen lang ist, und füllt kürzere Zähler mit 0 auf, 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
• Listenstil-Eigenschaften: 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