CSSCounterStyleRule.suffix — Eigenschaft · JavaScript-Referenz

Signatur

CSSCounterStyleRule.suffix

Beschreibung

Die Eigenschaft suffix der Schnittstelle CSSCounterStyleRule gibt den Wert des suffix-Deskriptors einer @counter-style-At-Regel als String zurück. Beim Zuweisen wird der Deskriptor geändert. Das Suffix steht in Listen hinter der Zählerdarstellung, zum Beispiel der Punkt in „1.“ oder die schließende Klammer in „a)“.

Ist in der Regel kein suffix angegeben, liefert die Eigenschaft einen leeren String "". Der Browser nutzt dann den Standardwert ". " (Punkt gefolgt von einem Leerzeichen). Der zurückgegebene Wert ist serialisiert, Strings stehen also in Anführungszeichen, etwa "\") \"".

Nützlich ist die Eigenschaft, wenn du Listen-Layouts zur Laufzeit ändern willst: zum Beispiel für ein Umschalten zwischen „1.“ und „1)“, für Themes oder für Nummerierungen, die sich an die Sprache anpassen. Die Änderung wirkt sofort auf alle Listen, die den Zählerstil über list-style-type oder counter() nutzen.

Parameter

Name	Typ	Default	Beschreibung
$value	string		Nur beim Setzen: ein gültiger `<symbol>`-Wert, also ein CSS-String wie `'") "'`, ein Bezeichner (`custom-ident`) oder ein Bild. Ungültige Werte werden stillschweigend ignoriert.

Beispiele

Suffix einer @counter-style-Regel auslesen

// CSS: @counter-style klammer { system: numeric; symbols: "0" "1" "2" "3" "4" "5" "6" "7" "8" "9"; suffix: ") "; }
const sheet = new CSSStyleSheet();
sheet.replaceSync(`
  @counter-style klammer {
    system: numeric;
    symbols: "0" "1" "2" "3" "4" "5" "6" "7" "8" "9";
    suffix: ") ";
  }
`);
document.adoptedStyleSheets = [sheet];

const rule = [...sheet.cssRules].find(
  (r) => r instanceof CSSCounterStyleRule && r.name === 'klammer'
);
console.log(rule.suffix);

") "

Suffix zur Laufzeit umschalten

const sheet = new CSSStyleSheet();
sheet.replaceSync(`
  @counter-style schritte { system: extends decimal; }
  ol.schritte { list-style-type: schritte; }
`);
document.adoptedStyleSheets = [...document.adoptedStyleSheets, sheet];

const rule = sheet.cssRules[0];
console.log(JSON.stringify(rule.suffix)); // nicht gesetzt

// Aus „1. “ wird „1: “
rule.suffix = '": "';
console.log(rule.suffix);

"" ": "

Ungültige Zuweisung wird ignoriert

const sheet = new CSSStyleSheet();
sheet.replaceSync('@counter-style demo { system: cyclic; symbols: "•"; suffix: " "; }');
const rule = sheet.cssRules[0];

rule.suffix = '"–" "x"'; // zwei Symbole sind nicht erlaubt
console.log(rule.suffix); // unverändert

rule.suffix = '" – "';
console.log(rule.suffix);

" " " – "

// Wichtig · Fallstricke

Anführungszeichen: Der Wert muss als CSS-Syntax übergeben werden. rule.suffix = ') ' ohne innere Anführungszeichen ist ungültig und wird ignoriert. Richtig ist rule.suffix = '") "'.
Ungültige Werte lösen keinen Fehler aus, der alte Wert bleibt einfach erhalten. Prüfe nach dem Setzen, ob der neue Wert übernommen wurde.
Ein leerer Rückgabewert heißt „nicht gesetzt“, nicht „kein Suffix“. Gerendert wird dann der Standardwert ". ". Soll gar kein Suffix erscheinen, setze '""'.
Das Suffix gilt nur für ::marker bzw. list-style-type. Bei counter() und counters() in content wird es nicht angehängt.
Bei Stylesheets von anderen Ursprüngen (Cross-Origin) ohne CORS löst der Zugriff auf cssRules einen SecurityError aus.
Kompatibilität: Firefox unterstützt die Eigenschaft seit Version 33, Chrome seit 91 und Safari seit 17. In älteren Safari-Versionen gibt es CSSCounterStyleRule nicht, prüfe das vorher mit 'CSSCounterStyleRule' in window.

Siehe auch

CSSCounterStyleRule.negative CSSCounterStyleRule.prefix CSSCounterStyleRule.system CSSCounterStyleRule.name CSSCounterStyleRule.pad