Signatur
Beschreibung
Die Eigenschaft range der Schnittstelle CSSCounterStyleRule gibt den Wert des range-Deskriptors einer @counter-style-Regel als String zurück. Man kann ihr auch einen neuen Wert zuweisen. Der Deskriptor legt fest, für welche Zählerwerte der eigene Zählerstil gilt. Liegt ein Wert außerhalb dieses Bereichs, verwendet der Browser den Stil aus dem fallback-Deskriptor (standardmäßig decimal).
Gültige Werte sind auto oder eine kommagetrennte Liste von Bereichen. Jeder Bereich besteht aus einer Unter- und einer Obergrenze, zum Beispiel 1 10, 20 infinite. Für eine offene Grenze nimmt man das Schlüsselwort infinite. Bei auto hängt der Bereich vom system ab: Bei cyclic sind alle Werte erlaubt, bei alphabetic und symbolic nur Werte ab 1, bei additive nur Werte ab 0.
Die Eigenschaft ist nützlich, wenn Zählerstile per JavaScript geprüft oder zur Laufzeit angepasst werden sollen. Ein Beispiel ist eine Aufzählung, die ihre eigenen Symbole nur für die ersten n Einträge zeigt. Eine Änderung wirkt sofort auf alle Elemente, die diesen Zählerstil über list-style-type oder counter() benutzen.
Parameter
| Name | Typ | Default | Beschreibung |
|---|---|---|---|
| $value (beim Setzen) | string | Neuer Wert für den Deskriptor, z. B. "auto", "1 5" oder "1 3, 10 infinite". Ungültige Werte werden stillschweigend ignoriert. |
Rückgabewert
range-Deskriptors in der Schreibweise des Browsers. Ist der Deskriptor in der Regel nicht gesetzt, erhält man einen leeren String "".Beispiele
range einer @counter-style-Regel auslesen
const style = document.createElement('style');
style.textContent = `
@counter-style punkte {
system: cyclic;
symbols: "●" "○";
suffix: " ";
range: 1 5;
}
`;
document.head.append(style);
const rule = [...style.sheet.cssRules]
.find((r) => r instanceof CSSCounterStyleRule && r.name === 'punkte');
console.log(rule.range);Bereich zur Laufzeit erweitern
const style = document.createElement('style');
style.textContent = `
@counter-style sterne { system: cyclic; symbols: "★"; range: 1 3; }
ol { list-style-type: sterne; }
`;
document.head.append(style);
const rule = [...style.sheet.cssRules]
.find((r) => r instanceof CSSCounterStyleRule);
// Ab jetzt bekommen die Einträge 1–3 und alle ab 10 einen Stern
rule.range = '1 3, 10 infinite';
console.log(rule.range);Ungültige Werte und fehlender Deskriptor
const style = document.createElement('style');
style.textContent = `
@counter-style a { system: cyclic; symbols: "-"; range: 1 5; }
@counter-style b { system: cyclic; symbols: "+"; }
`;
document.head.append(style);
const [a, b] = style.sheet.cssRules;
a.range = '10 1'; // Untergrenze > Obergrenze → ungültig
console.log(a.range); // unverändert
console.log(JSON.stringify(b.range)); // Deskriptor nicht gesetzt// Wichtig · Fallstricke
- Ungültige Werte schlagen stillschweigend fehl: Weist man einen ungültigen Wert zu, etwa eine Untergrenze größer als die Obergrenze oder Text, der sich nicht parsen lässt, wird kein Fehler geworfen. Der alte Wert bleibt einfach bestehen. Wenn es wichtig ist, ob die Zuweisung geklappt hat, lies den Wert danach noch einmal aus.
- Leerer String: Fehlt der Deskriptor, gibt die Eigenschaft
""zurück und nicht"auto", obwohl sich der Browser dann wie beiautoverhält. - Schreibweise: Der Browser kann den Wert in eigener Form zurückgeben, zum Beispiel mit anderen Leerzeichen. Vergleiche mit einem festen String sind deshalb unzuverlässig.
- Stylesheets von anderen Domains: Wenn man
document.styleSheetsdurchsucht, kann der Zugriff aufcssRulesbei Stylesheets von fremden Domains einenSecurityErrorwerfen. Den Zugriff daher intry…catchpacken. - Browser-Unterstützung: Seit Chrome/Edge 91, Firefox 33 und Safari 17 verfügbar. In älteren Safari-Versionen gibt es
CSSCounterStyleRulenicht; vorher mit'CSSCounterStyleRule' in windowprüfen.