CSSCounterStyleRule.system — Eigenschaft · JavaScript-Referenz

Signatur

CSSCounterStyleRule.system

Beschreibung

Die Eigenschaft system der Schnittstelle CSSCounterStyleRule gibt den system-Deskriptor einer @counter-style-Regel als serialisierten String zurück. Der Deskriptor legt fest, nach welchem Algorithmus aus den Symbolen eines Zählerstils die Darstellung eines Zählerwerts erzeugt wird, etwa für Listenmarkierungen oder für counter() in generierten Inhalten.

Mögliche Werte sind:

cyclic: Die Symbole wiederholen sich reihum.
numeric: Stellenwertsystem, z. B. für eigene Zahlensysteme.
alphabetic: Bijektive Darstellung wie a, b, … z, aa, ab.
symbolic: Die Symbole werden wiederholt und verdoppelt (*, †, **, ††).
additive: Additive Darstellung, etwa für römische Zahlen (nutzt additive-symbols).
fixed oder fixed <integer>: Eine endliche Symbolfolge, optional ab einem Startwert.
extends <counter-style-name>: Übernimmt den Algorithmus eines anderen Zählerstils und überschreibt einzelne Deskriptoren.

Die Eigenschaft ist praktisch, wenn Sie Zählerstile zur Laufzeit untersuchen (z. B. in Theme-Editoren oder Debug-Werkzeugen) oder feinjustieren möchten, etwa den Startwert eines fixed-Systems oder den Basisstil bei extends. Ist der Deskriptor in der Regel nicht angegeben, liefert die Eigenschaft einen leeren String – der wirksame Standardwert ist dann symbolic.

Parameter

Name	Typ	Default	Beschreibung
$value	string		Nur beim Setzen: neuer Wert des `system`-Deskriptors in CSS-Syntax, z. B. `"fixed 5"` oder `"extends decimal"`. Ungültige Werte werden stillschweigend ignoriert.

Rückgabewert

Typ

string

Beschreibung

Der serialisierte Wert des system-Deskriptors, z. B. "cyclic", "fixed 3" oder "extends decimal". Leerer String, wenn der Deskriptor in der Regel fehlt.

Beispiele

System aller Zählerstile eines Stylesheets auslesen

const style = document.createElement('style');
style.textContent = `
  @counter-style daumen {
    system: cyclic;
    symbols: "👍";
    suffix: " ";
  }
  @counter-style kapitel {
    system: fixed 3;
    symbols: A B C D;
  }
  @counter-style klammer-dezimal {
    system: extends decimal;
    prefix: "(";
    suffix: ") ";
  }
`;
document.head.append(style);

for (const rule of style.sheet.cssRules) {
  if (rule instanceof CSSCounterStyleRule) {
    console.log(`${rule.name}: ${rule.system}`);
  }
}

daumen: cyclic kapitel: fixed 3 klammer-dezimal: extends decimal

Startwert eines fixed-Systems zur Laufzeit anpassen

const style = document.createElement('style');
style.textContent = `
  @counter-style schritte {
    system: fixed 1;
    symbols: "①" "②" "③" "④";
  }
  ol.schritte { list-style: schritte; }
`;
document.head.append(style);

const rule = [...style.sheet.cssRules]
  .find((r) => r instanceof CSSCounterStyleRule && r.name === 'schritte');

// Liste soll bei 3 beginnen: Symbol ① gilt nun für Wert 3
rule.system = 'fixed 3';
console.log(rule.system);

fixed 3

Fehlender Deskriptor und ignorierte Zuweisungen

const style = document.createElement('style');
style.textContent = '@counter-style sterne { symbols: "*"; }';
document.head.append(style);

const rule = style.sheet.cssRules[0];

// Nicht angegeben -> leerer String (wirksam ist "symbolic")
console.log(JSON.stringify(rule.system));

// Ungültiger Wert wird ignoriert
rule.system = 'kreisförmig';
console.log(JSON.stringify(rule.system));

"" ""

// Wichtig · Fallstricke

Algorithmuswechsel wird ignoriert: Laut Spezifikation (CSS Counter Styles Level 3) passiert beim Setzen nichts, wenn der neue Wert den verwendeten Algorithmus ändern würde, z. B. von cyclic auf additive. Erlaubt sind Änderungen innerhalb desselben Algorithmus, etwa fixed 1 → fixed 3 oder ein anderer Basisstil bei extends. Um das System wirklich zu wechseln, löschen Sie die Regel und legen sie neu an (deleteRule()/insertRule()).
Stille Fehler: Ungültige Werte lösen keine Ausnahme aus. Prüfen Sie nach dem Setzen den Wert erneut, wenn Sie sicher sein wollen.
Abhängige Deskriptoren: additive braucht additive-symbols, alle anderen Systeme (außer extends) brauchen symbols. alphabetic und numeric brauchen mindestens zwei Symbole, sonst ist die Regel ungültig. Bei extends darf symbols nicht angegeben werden.
Serialisierung: Der Browser gibt den Wert normalisiert zurück, z. B. fixed ohne Startwert statt fixed 1. Vergleichen Sie Strings deshalb nicht zu streng.
Kompatibilität: CSSCounterStyleRule wird von Firefox schon lange unterstützt, von Chromium ab Version 91 und von Safari erst ab Version 17. Für ältere Browser sollten Sie mit typeof CSSCounterStyleRule !== 'undefined' prüfen.

Siehe auch

CSSCounterStyleRule.suffix CSSCounterStyleRule.name CSSCounterStyleRule.range CSSCounterStyleRule.symbols CSSCounterStyleRule.pad