CSSCounterStyleRule.name — Eigenschaft · JavaScript-Referenz

Signatur

CSSCounterStyleRule.name

Beschreibung

Die Eigenschaft name der Schnittstelle CSSCounterStyleRule gibt den Bezeichner zurück, der in einer @counter-style-Regel direkt nach dem At-Keyword steht, z. B. daumen bei @counter-style daumen { … }. Unter diesem Namen wird der Zählerstil in CSS verwendet, etwa in list-style-type: daumen, counter(abschnitt, daumen) oder im Deskriptor extends bzw. fallback einer anderen Regel.

Die Eigenschaft lässt sich auch schreiben. Weist du einen neuen Namen zu, benennt der Browser die Regel sofort um. Alle Elemente, die den alten Namen nutzen, verlieren dann den Stil und fallen auf decimal zurück. Elemente, die schon auf den neuen Namen verweisen, bekommen den Stil dagegen sofort.

Typische Einsatzfälle sind Werkzeuge, die Stylesheets untersuchen (z. B. alle eigenen Zählerstile einer Seite auflisten), Theme-Umschalter, die Zählerstile zur Laufzeit austauschen, und Tests für konstruierte Stylesheets (new CSSStyleSheet()).

Parameter

Name	Typ	Default	Beschreibung
$value	string		Nur beim Schreiben: der neue Name als gültiger `<custom-ident>`. Ungültige oder reservierte Werte werden stillschweigend ignoriert.

Rückgabewert

Typ

string

Beschreibung

Der serialisierte Name der @counter-style-Regel. Ist der Name ein vordefinierter Stilname (z. B. lower-roman), wird er in Kleinbuchstaben zurückgegeben. Eigene Namen behalten ihre Groß- und Kleinschreibung.

Beispiele

Namen einer Regel aus einem konstruierten Stylesheet lesen

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

const rule = sheet.cssRules[0];
console.log(rule instanceof CSSCounterStyleRule); // true
console.log(rule.name);

true daumen

Alle eigenen Zählerstile der Seite auflisten

const counterStyleNames = () => {
  const names = [];
  for (const sheet of [...document.styleSheets, ...document.adoptedStyleSheets]) {
    let rules;
    try {
      rules = sheet.cssRules; // bei fremden Stylesheets ohne CORS: SecurityError
    } catch {
      continue;
    }
    for (const rule of rules) {
      if (rule instanceof CSSCounterStyleRule) names.push(rule.name);
    }
  }
  return names;
};

console.log(counterStyleNames());

["daumen"]

Regel zur Laufzeit umbenennen und Theme wechseln

const sheet = new CSSStyleSheet();
sheet.replaceSync(`
  @counter-style theme-hell { system: cyclic; symbols: "☀"; suffix: " "; }
  ol.aufgaben { list-style-type: theme-aktiv; }
`);
document.adoptedStyleSheets = [sheet];

const rule = sheet.cssRules[0];

// Noch zeigt die Liste 'decimal', weil 'theme-aktiv' nicht existiert.
rule.name = 'theme-aktiv'; // jetzt greift der Stil sofort
console.log(rule.name);

// Reservierte Namen werden ignoriert:
rule.name = 'none';
console.log(rule.name);

theme-aktiv theme-aktiv

// Wichtig · Fallstricke

Keine Fehlermeldung bei ungültigen Werten: Setzt du none, einen der nicht überschreibbaren Namen (decimal, disc, square, circle, disclosure-open, disclosure-closed) oder einen ungültigen Bezeichner, bleibt der alte Name einfach stehen. Prüfe deshalb nach dem Zuweisen, ob sich der Wert wirklich geändert hat.
Verweise werden nicht angepasst: Beim Umbenennen ändert der Browser weder list-style-type-Angaben noch extends/fallback in anderen Regeln. Diese Stellen musst du selbst nachziehen.
Bei gleichen Namen gilt die letzte Regel: Gibt es mehrere @counter-style-Regeln mit demselben Namen, wirkt nur die zuletzt definierte (Kaskade).
CORS: Liest du cssRules aus Stylesheets einer fremden Domain ohne passende CORS-Freigabe, wird ein SecurityError ausgelöst. Fange ihn deshalb mit try/catch ab.
Kompatibilität: @counter-style und damit CSSCounterStyleRule funktionieren in Firefox schon lange, in Chromium ab Version 91 und in Safari erst ab 17. Für ältere Browser prüfst du vorher mit 'CSSCounterStyleRule' in window.

Siehe auch

CSSContainerRule.containerName CSSCounterStyleRule.pad CSSCounterStyleRule.range CSSCounterStyleRule.negative CSSCounterStyleRule.system