system

Syntax

/* Keyword values */
system: cyclic;
system: numeric;
system: alphabetic;
system: symbolic;
system: additive;
system: fixed;

/* Other values */
system: fixed 3;
system: extends decimal;
system: extends circled-letters;

Werte

Dies kann eine von drei Formen annehmen:

• Einer der Schlüsselwortwerte cyclic, numeric, alphabetic, symbolic, additive oder fixed.
• Der Schlüsselwortwert fixed zusammen mit einer ganzen Zahl.
• Der Schlüsselwortwert extends zusammen mit einem <counter-style-name>-Wert.

Die Werte umfassen:

cyclic

Durchläuft die im symbols-Deskriptor bereitgestellte Liste von Symbolen. Sobald das Ende der Liste erreicht ist, beginnt der Zyklus von vorne. Dieser Wert ist sowohl für grundlegende Aufzählungs-Stile mit nur einem Symbol als auch für Stile mit mehreren Symbolen nützlich. Im symbols-Deskriptor muss mindestens ein Symbol angegeben werden, ansonsten ist der Zählerstil ungültig.

numeric

Interpretiert die Zählersymbole als Ziffern in einem Positionswert-Zahlensystem. Das Numerik-System ist dem alphabetic-System ähnlich, das oben beschrieben wurde. Der Hauptunterschied besteht darin, dass im alphabetic-System das erste Zählersymbol im symbols-Deskriptor als 1 interpretiert wird, das nächste als 2 und so weiter. Im numerischen System hingegen wird das erste Zählersymbol als 0 interpretiert, das nächste als 1, dann 2 und so weiter.

Im symbols-Deskriptor müssen mindestens zwei Zählersymbole angegeben werden, sonst ist der Zählerstil ungültig.

alphabetic

Interpretiert die angegebenen Symbole als Ziffern in ein alphabetisches Zahlensystem. Falls die Zeichen "a" bis "z" als Symbole in einem Zählerstil angegeben sind, mit dem alphabetic-System, dann werden die ersten 26 Zählerdarstellungen als "a", "b" bis "z" dargestellt. Bis zu diesem Punkt verhält sich das System wie das symbolic-System, das oben beschrieben wurde. Nach "z" wird es jedoch als "aa", "ab", "ac" fortgesetzt...

Der symbols-Deskriptor muss mindestens zwei Symbole enthalten, sonst ist der Zählerstil ungültig. Das erste im symbols-Deskriptor angegebene Zählersymbol wird als 1 interpretiert, das nächste als 2 und so weiter. Dieses System ist ebenfalls streng über positive Zählerwerte definiert.

symbolic

Durchläuft die im symbols-Deskriptor bereitgestellte Symbolenliste wiederholt, indem die Symbole bei jedem weiteren Durchlauf doppelt, dreifach und so weiter genommen werden. Wenn zum Beispiel die Symbole "◽" und "◾" im symbols-Deskriptor angegeben sind, werden sie bei jedem weiteren Durchlauf "◽◽" und "◾◾", dann "◽◽◽" und "◾◾◾" und so weiter. Im symbols-Deskriptor muss mindestens ein Symbol angegeben werden, andernfalls ist der Zählerstil ungültig. Dieses Zählersystem funktioniert nur für positive Zählerwerte.

additive

Wird verwendet, um "Zeichen-Wert"-Zahlensysteme darzustellen, wie römische Zahlen, die keine Ziffern in verschiedenen Positionen wiederverwenden, um unterschiedliche Werte zu erhalten, sondern zusätzliche Ziffern für größere Werte definieren. Der Wert einer Zahl in einem solchen System kann durch Addition der Ziffern in der Zahl ermittelt werden.

Ein zusätzlicher Deskriptor namens additive-symbols muss mit mindestens einem additive tuple angegeben werden, andernfalls wird die Zählerstilregel ungültig. Ein additives Tuple ist ähnlich wie ein zusammengesetztes Zählersymbol, das aus zwei Teilen besteht: einem normalen Zählersymbol und einem nicht-negativen ganzzahligen Gewicht. Die additiven Tupel müssen in absteigender Reihenfolge ihrer Gewichte angegeben werden, sonst ist das System ungültig.

fixed oder "fixed <integer>"

Definiert eine endliche Menge von Symbolen, die einmal durch die im symbols-Deskriptor bereitgestellte Liste von Symbolen iteriert wird. Sobald die angegebenen Symbole durchlaufen sind, wird der Fallback-Zählerstil verwendet. Dieser Schlüsselwortwert ist in Fällen nützlich, in denen die Werte des Zählerstils endlich sind. Im symbols-Deskriptor muss mindestens ein Symbol angegeben werden, andernfalls ist der Zählerstil ungültig. Das fixed-Schlüsselwort kann durch einen optionalen <integer>-Wert gefolgt werden. Wenn angegeben, gibt der <integer>-Wert den Punkt in der Liste an, der das erste Symbol aus der Symbolenliste erhält. Wenn es weggelassen wird, ist der Standardwert für integer 1, was dem ersten Element in der Liste das erste Symbol gibt.

extends

Erweitert den Algorithmus eines anderen browser- oder autoren-definierten Zählerstils, indem bestimmte Aspekte des erweiterten Zählerstils verändert werden können. Alle nicht angegebenen Deskriptoren und deren Werte werden vom angegebenen erweiterten Zählerstil geerbt. Wenn der mit extends angegebene Zählerstilname noch nicht definiert ist, wird der decimal-Zählerstil standardmäßig erweitert.

Es darf keinen symbols- oder additive-symbols-Deskriptor enthalten, andernfalls wird die Zählerstilregel ungültig. Wenn eine oder mehrere Zählerstildefinitionen mit ihren extends-Werten einen Zyklus bilden, behandelt der Browser alle beteiligten Zählerstile, als ob sie sich vom decimal-Stil erweitern.

Formale Definition

Formale Syntax

system = 
  cyclic                            |
  numeric                           |
  alphabetic                        |
  symbolic                          |
  additive                          |
  [ fixed <integer>? ]              |
  [ extends <counter-style-name> ]  

Beispiele

Zyklischer Zähler

Der cyclic-Wert läuft durch die Liste der Symbole, wobei die Liste nach Bedarf wiederholt wird:

CSS

<ul>
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
  <li>Five</li>
  <li>Six</li>
</ul>

@counter-style fisheye {
  system: cyclic;
  symbols: ◉ ➀;
  suffix: ": ";
}

ul {
  list-style: fisheye;
}

Ergebnis

Fixierter Zähler

Der fixed-Wert läuft nur einmal durch die Liste der Symbole, beginnend mit der Elementnummer, die durch den integer-Wert angegeben wird:

CSS

<ul>
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
  <li>Five</li>
  <li>Six</li>
</ul>

@counter-style circled-digits {
  system: fixed 3;
  symbols: ➀ ➁ ➂;
  suffix: ": ";
}

ul {
  list-style: circled-digits;
}

Ergebnis

Symbolischer Zähler

Der symbolic-Wert läuft durch die im symbols-Deskriptor definierte Liste und verdoppelt bzw. verdreifacht die Anzahl der Symbole für den zweiten und dritten Durchlauf durch die Liste, jeweils:

CSS

<ul>
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
  <li>Five</li>
  <li>Six</li>
  <li>Seven</li>
  <li>Eight</li>
</ul>

@counter-style abc {
  system: symbolic;
  symbols: a b c;
  suffix: ". ";
}

ul {
  list-style: abc;
}

Ergebnis

Alphabetischer Zähler

CSS

<ul>
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
  <li>Five</li>
  <li>Six</li>
  <li>Seven</li>
  <li>Eight</li>
</ul>

@counter-style abc {
  system: alphabetic;
  symbols: a b c;
  suffix: ". ";
}

ul {
  list-style: abc;
}

Ergebnis

Numerischer Zähler

Das erste Symbol, das im symbols-Deskriptor angegeben ist, wird hier als 0 interpretiert.

CSS

<ul>
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
  <li>Five</li>
  <li>Six</li>
  <li>Seven</li>
  <li>Eight</li>
</ul>

@counter-style abc {
  system: numeric;
  symbols: a b c;
  suffix: ". ";
}

ul {
  list-style: abc;
}

Ergebnis

Numerischer Zähler mit numerischen Symbolen

Wie im folgenden Beispiel gezeigt, wird, wenn Ziffern von 0 bis 9 als Symbole angegeben sind, dieser Zählerstil Symbole ebenso wie der dezimale Zählerstil rendern.

CSS

<ul class="list">
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
  <li>Five</li>
  <li>Six</li>
  <li>Seven</li>
  <li>Eight</li>
  <li>Nine</li>
  <li>Ten</li>
</ul>

@counter-style numbers {
  system: numeric;
  symbols: "0" "1" "2" "3" "4" "5" "6" "7" "8" "9";
  suffix: ".";
}

ul {
  list-style: numbers;
}

Ergebnis

Additiver Zähler

Dieses Beispiel rendert eine Liste mit römischen Zahlen. Beachten Sie, dass ein range angegeben ist. Dies liegt daran, dass die Darstellung nur bis zu einem Zählerwert von 3999 korrekte römische Zahlen erzeugt. Außerhalb dieser Reichweite werden die restlichen Zählerdarstellungen auf dem decimal-Stil basieren, welcher der Fallback ist. Wenn Sie Zählerwerte als römische Zahlen darstellen müssen, könnten Sie entweder einen der vordefinierten Zählerstile, upper-roman oder lower-roman, verwenden, anstatt die Regel selbst zu erstellen.

HTML

Wir verwenden das start-Attribut auf dem <ol>-Element, um zu zeigen, dass das Zählen nicht bei 1 beginnen muss. Zusätzlich verwenden wir das value-Attribut auf dem fünften <li>-Element, um zu zeigen, dass die von Ihnen definierten Zähler mit @counter-style sich genauso wie native Zähler verhalten.

<ol start="48">
  <li>48</li>
  <li>49</li>
  <li>50</li>
  <li>51</li>
  <li value="109">109</li>
  <li>110</li>
</ol>

CSS

@counter-style uppercase-roman {
  system: additive;
  range: 1 3999;
  additive-symbols:
    1000 M,
    900 CM,
    500 D,
    400 CD,
    100 C,
    90 XC,
    50 L,
    40 XL,
    10 X,
    9 IX,
    5 V,
    4 IV,
    1 I;
}

ol {
  list-style: uppercase-roman;
  padding-left: 5em;
}

Ergebnis

Erweitern eines Zählers

Dieses Beispiel verwendet den Algorithmus, die Symbole und andere Eigenschaften von lower-alpha, einem der mehreren nativen list-style-type-Zählwerte, erweitert ihn jedoch, indem der Punkt ('.') nach der Zählerdarstellung entfernt wird und die Zeichen in Klammern gesetzt werden, wie (a) und (b).

HTML

<ul class="list">
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
  <li>Five</li>
</ul>

CSS

@counter-style alpha-modified {
  system: extends lower-alpha;
  prefix: "(";
  suffix: ") ";
}

ul {
  list-style: alpha-modified;
}

Ergebnis

Spezifikationen

Browser-Kompatibilität

Siehe auch

• Andere @counter-style Deskriptoren, einschließlich symbols, additive-symbols, negative, prefix, suffix, range, pad, speak-as, und fallback
• list-style, list-style-image, list-style-position
• symbols(), die funktionale Notation, die anonyme Zählerstile erstellt.