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 in einer von drei Formen auftreten:

• Eines 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.

Zu den Werten gehören:

cyclic

Durchläuft die in dem symbols-Deskriptor bereitgestellte Liste von Symbolen. Sobald das Ende der Liste erreicht ist, wird der Zyklus zurück zum Anfang gehen und von vorne beginnen. Dieser Wert ist sowohl für grundlegende Aufzählungszeichenstile mit nur einem Symbol als auch für Stile mit mehreren Symbolen nützlich. Mindestens ein Symbol muss im symbols-Deskriptor angegeben werden, sonst ist der Zählerstil nicht gültig.

numeric

Interpretiert die Zählersymbole als Ziffern in einem Stellenwert-Zahlensystem. Das numerische System ist ähnlich wie das oben beschriebene alphabetic-System. Der Hauptunterschied besteht darin, dass im alphabetic-System das erste Zählersymbol, das im symbols-Deskriptor angegeben ist, als 1 interpretiert wird, das nächste als 2 und so weiter. Im numerischen System wird jedoch das erste Zählersymbol als 0 interpretiert, das nächste als 1, dann 2 und so weiter.

Es müssen mindestens zwei Zählersymbole im symbols-Deskriptor angegeben werden, sonst ist der Zählerstil nicht gültig.

alphabetic

Interpretiert die angegebenen Symbole als Ziffern in einem alphabetischen Zahlensystem. Wenn die Zeichen "a" bis "z" als Symbole in einem Zählerstil mit dem alphabetic-System angegeben werden, sind die ersten 26 Zählerdarstellungen "a", "b" bis "z". Bis zu diesem Punkt entspricht das Verhalten dem des oben beschriebenen symbolic-Systems. Nach "z" geht es jedoch mit "aa", "ab", "ac" weiter...

Der symbols-Deskriptor muss mindestens zwei Symbole enthalten, sonst ist der Zählerstil nicht gültig. Das erste Zählersymbol, das im symbols-Deskriptor angegeben ist, wird als 1 interpretiert, das nächste als 2 und so weiter. Dieses System ist auch nur für positive Zählerwerte definiert.

symbolic

Durchläuft die in der symbols-Deskriptorliste angegebenen Symbole wiederholt und verdoppelt, verdreifacht usw. die Symbole bei jedem weiteren Durchlauf durch die Liste. Wenn zum Beispiel zwei Symbole "◽" und "◾" im symbols-Deskriptor angegeben sind, werden sie bei jedem weiteren Durchlauf "◽◽" und "◾◾", dann "◽◽◽" und "◾◾◽" und so weiter in den folgenden Durchläufen. Mindestens ein Symbol muss im symbols-Deskriptor angegeben werden, sonst ist der Zählerstil nicht gültig. Dieses Zählsystem funktioniert nur für positive Zählerwerte.

additive

Wird verwendet, um "Sign-Wert"-Zahlensysteme darzustellen, wie z.B. römische Ziffern, die anstatt Ziffern an verschiedenen Positionen neu zu verwenden, um unterschiedliche Werte zu erhalten, 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 gefunden werden.

Ein zusätzlicher Deskriptor namens additive-symbols muss mit mindestens einem additiven Tupel angegeben werden, damit die Zählerregeln gültig sind. Ein additives Tupel ähnelt einem zusammengesetzten Zählersymbol, das aus zwei Teilen besteht: einem normalen Zählersymbol und einem nicht-negativen Gewicht. Die additiven Tupel müssen in absteigender Reihenfolge ihrer Gewichte angegeben werden, andernfalls ist das System ungültig.

fixed oder fixed <integer>

Definiert eine endliche Menge von Symbolen, die einmal durch die im symbols Deskriptor bereitgestellte Symbol-Liste iterieren. Sobald die angegebenen Symbole durchlaufen wurden, wird der Ersatz-Zählerstil verwendet. Dieser Schlüsselwortwert ist nützlich in Fällen, in denen die Zählerstilwerte endlich sind. Mindestens ein Symbol muss im symbols-Deskriptor angegeben werden, sonst ist der Zählerstil nicht gültig. Das fixed Schlüsselwort kann von einem optionalen <integer> Wert gefolgt werden. Falls angegeben, gibt der <integer> Wert das Element in der Liste an, das das erste Symbol aus der Liste der Symbole erhält. Wenn weggelassen, ist der Standardwert von integer 1, was dem ersten Element in der Liste das erste Symbol gibt.

extends

Erweitert den Algorithmus eines anderen browser- oder autorendefinierten Zählerstils, indem es die Veränderung einiger Aspekte des erweiterten Zählerstils erlaubt. Alle nicht spezifizierten Deskriptoren und ihre Werte werden von dem erweiterten Zählerstil übernommen. Ist der mit extends angegebene Zählerstilname noch nicht definiert, wird der decimal Zählerstil standardmäßig erweitert.

Es darf keinen symbols oder additive-symbols-Deskriptor enthalten, sonst ist 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 Erweiterung des decimal-Stils.

Formale Definition

Formale Syntax

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

Beispiele

Zyklischer Zähler

Der cyclic-Wert durchläuft die Liste der Symbole und wiederholt die Liste bei Bedarf:

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

Fester Zähler

Der fixed-Wert durchläuft die Liste der Symbole nur einmal und startet den einzelnen Zyklus bei der durch den integer-Wert angegebenen Listenelementnummer:

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 durchläuft die im symbols-Deskriptor definierte Liste, doppelt und verdreifacht die Anzahl der Symbole für den zweiten und dritten Zyklus durch die Liste:

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, wenn Ziffern von 0 bis 9 als Symbole angegeben sind, wird dieser Zählerstil dieselben Symbole wie der dezimale Zählerstil verwenden.

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 Ziffern. Beachten Sie, dass ein range angegeben ist, da die Darstellung nur bis zu einem Zählerwert von 3999 korrekte römische Ziffern produziert. Außerhalb des Bereichs werden die restlichen Zählerdarstellungen basierend auf dem decimal-Stil erstellt, was der Rückfallstil ist. Falls Sie Zählerwerte als römische Ziffern darstellen müssen, könnten Sie eine 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 demonstrieren, dass das Zählen nicht bei 1 beginnen muss. Zusätzlich verwenden wir das value Attribut auf dem fünften <li> Element, um zu demonstrieren, dass die von Ihnen definierten Zähler mit @counter-style genauso funktionieren wie native Zähler.

<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

Erweiterung eines Zählers

Dieses Beispiel verwendet den Algorithmus, die Symbole und andere Eigenschaften von lower-alpha, einen der mehreren nativen list-style-type Zählertypwerte, aber erweitert es, indem der Punkt ('.') nach der Zählerdarstellung entfernt wird und die Zeichen in Klammern eingeschlossen werden, wie in (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 zum Erstellen anonymer Zählerstile.