CSSCounterStyleRule — Schnittstelle · JavaScript-Referenz

Signatur

interface CSSCounterStyleRule extends CSSRule

Beschreibung

CSSCounterStyleRule ist das CSSOM-Gegenstück zur At-Regel @counter-style. Mit dieser Regel definiert man eigene Zählstile, zum Beispiel Emoji-Aufzählungen, eigene Buchstabenfolgen oder Nummern mit Präfix. Diese Stile nutzt man anschließend in list-style-type oder in counter() bzw. counters().

Einen eigenen Konstruktor hat die Schnittstelle nicht. Du bekommst ein Objekt, indem du CSSStyleSheet.cssRules durchläufst oder mit CSSStyleSheet.insertRule() eine neue @counter-style-Regel einfügst. Die Schnittstelle erbt von CSSRule, also auch cssText, parentStyleSheet und parentRule.

Jeder Deskriptor der At-Regel ist als Zeichenketten-Eigenschaft zum Lesen und Schreiben verfügbar:

name: Name des Zählstils, also der Bezeichner nach @counter-style
system: Zählsystem, z. B. cyclic, numeric, alphabetic, symbolic, additive, fixed oder extends <name>
symbols und additiveSymbols: die verwendeten Symbole
negative, prefix, suffix: Zeichen für negative Werte sowie Zeichen vor und nach dem Marker
range, pad, fallback, speakAs: Gültigkeitsbereich, Auffüllen auf eine Mindestlänge, Ersatzstil und Aussprache für Screenreader

Wenn du einen Deskriptor änderst, wirkt sich das sofort auf alle Elemente aus, die den Zählstil verwenden. So kannst du Aufzählungen dynamisch umgestalten, etwa für ein anderes Design-Thema oder eine andere Sprache, ohne dass der Browser das ganze Stylesheet neu einlesen muss.

Parameter

Name	Typ	Default	Beschreibung
$name Pflicht	string	—	Name des Zählstils. Beim Setzen muss es ein gültiger CSS-Bezeichner sein. Reservierte Namen wie `none`, `decimal` oder `disc` werden ignoriert.
$system	string	"" (entspricht symbolic)	Algorithmus, mit dem aus dem Zählerwert ein Marker wird.
$symbols	string	""	Leerzeichen-getrennte Liste der Symbole. Zeichenketten stehen dabei in Anführungszeichen, z. B. `'"★" "☆"'`.
$additiveSymbols	string	""	Gewichtete Symbole für `system: additive`, z. B. `'10 X, 5 V, 1 I'`.
$prefix	string	""	Zeichen, das vor dem Marker steht.
$suffix	string	"" (entspricht ". ")	Zeichen, das nach dem Marker steht.
$negative	string	"" (entspricht "-")	Zeichen für negative Zählerwerte.
$range	string	"" (entspricht auto)	Wertebereich, für den der Stil gilt, z. B. `'1 10'`.
$pad	string	""	Mindestlänge und Füllzeichen, z. B. `'3 "0"'` für 001, 002 …
$fallback	string	"" (entspricht decimal)	Ersatz-Zählstil für Werte außerhalb von `range`.
$speakAs	string	"" (entspricht auto)	Legt fest, wie Screenreader den Marker vorlesen, z. B. `bullets`, `numbers` oder `words`.

Rückgabewert

Typ

CSSCounterStyleRule

Beschreibung

Du erhältst Objekte dieses Typs aus CSSStyleSheet.cssRules oder CSSGroupingRule.cssRules. Alle Deskriptor-Eigenschaften geben eine string zurück. Ist ein Deskriptor nicht gesetzt, ist das eine leere Zeichenkette.

Beispiele

@counter-style-Regel finden und auslesen

// CSS im Dokument:
// @counter-style sterne { system: cyclic; symbols: "★" "☆"; suffix: " "; }

const findCounterStyle = (name) => {
  for (const sheet of document.styleSheets) {
    try {
      for (const rule of sheet.cssRules) {
        if (rule instanceof CSSCounterStyleRule && rule.name === name) {
          return rule;
        }
      }
    } catch {
      // Fremde Stylesheets (CORS) sind nicht lesbar
    }
  }
  return null;
};

const rule = findCounterStyle('sterne');
console.log(rule.system, rule.symbols, JSON.stringify(rule.suffix));

cyclic "★" "☆" " "

Neuen Zählstil per insertRule anlegen und verwenden

const sheet = new CSSStyleSheet();
sheet.insertRule(`@counter-style kapitel {
  system: numeric;
  symbols: "0" "1" "2" "3" "4" "5" "6" "7" "8" "9";
  prefix: "Kap. ";
  suffix: ": ";
  pad: 2 "0";
}`);
sheet.insertRule('ol.kapitel { list-style-type: kapitel; }', 1);
document.adoptedStyleSheets = [...document.adoptedStyleSheets, sheet];

const rule = sheet.cssRules[0];
console.log(rule.constructor.name, rule.name, rule.pad);

CSSCounterStyleRule kapitel 2 "0"

Aufzählungszeichen je nach Design-Thema live ändern

const sheet = new CSSStyleSheet();
sheet.replaceSync(`
  @counter-style thema { system: cyclic; symbols: "☀️"; suffix: " "; }
  ul.todo { list-style-type: thema; }
`);
document.adoptedStyleSheets = [...document.adoptedStyleSheets, sheet];

const themaRegel = [...sheet.cssRules]
  .find((r) => r instanceof CSSCounterStyleRule && r.name === 'thema');

const dunkel = matchMedia('(prefers-color-scheme: dark)');
const aktualisieren = () => {
  // Änderung wirkt sofort auf alle Listen mit list-style-type: thema
  themaRegel.symbols = dunkel.matches ? '"🌙"' : '"☀️"';
  console.log('Symbol:', themaRegel.symbols);
};
dunkel.addEventListener('change', aktualisieren);
aktualisieren();

Symbol: "☀️" (bzw. "🌙" im Dunkelmodus)

Siehe auch

CSSStartingStyleRule CSSStyleRule CSSConditionRule CSSContainerRule CSSFontFaceRule