CSSRule.cssText — Eigenschaft · JavaScript-Referenz

Signatur

CSSRule.cssText

Beschreibung

Die Eigenschaft cssText eines CSSRule-Objekts gibt die Regel als String zurück, also Selektor bzw. At-Rule-Vorspann und den Deklarationsblock. Bei gruppierenden Regeln wie CSSMediaRule, CSSSupportsRule oder CSSKeyframesRule sind alle verschachtelten Regeln mit enthalten.

Der Text ist nicht der Originalquelltext aus der CSS-Datei. Der Browser erzeugt ihn neu aus dem geparsten Objektmodell (CSSOM). Deshalb fehlen Kommentare, Leerzeichen werden vereinheitlicht, ungültige oder unbekannte Deklarationen entfallen, und Werte können umgeschrieben sein, zum Beispiel #f00 zu rgb(255, 0, 0), oder Kurzschreibweisen werden aufgelöst bzw. zusammengefasst.

Typische Anwendungen: Debugging, dynamisch erzeugte Stylesheets als Text exportieren (etwa bei Server-Side-Rendering oder CSS-in-JS), Regeln durchsuchen oder aktive Stile in Entwicklerwerkzeugen anzeigen. Für Änderungen ist cssText praktisch nur lesbar. Eine Regel ändert man über rule.style (CSSStyleDeclaration) oder man ersetzt sie mit deleteRule() und insertRule().

Rückgabewert

Typ

string

Beschreibung

Die vom Browser serialisierte Textform der Regel, einschließlich aller verschachtelten Regeln bei Gruppenregeln.

Beispiele

Alle Regeln eines Stylesheets ausgeben

const style = document.createElement('style');
style.textContent = `
  /* Kommentar verschwindet */
  .btn   {  color: red;  padding: 4px 8px; }
  @media (max-width: 600px) { .btn { padding: 2px; } }
`;
document.head.append(style);

for (const rule of style.sheet.cssRules) {
  console.log(rule.cssText);
}

.btn { color: red; padding: 4px 8px; } @media (max-width: 600px) { .btn { padding: 2px; } }

Konstruiertes Stylesheet als CSS-Text exportieren

const sheet = new CSSStyleSheet();
sheet.insertRule('.card { border-radius: 8px; }');
sheet.insertRule('.card:hover { opacity: 0.9; }', 1);

// z. B. für SSR oder zum Herunterladen
const cssString = [...sheet.cssRules]
  .map((rule) => rule.cssText)
  .join('\n');

console.log(cssString);

.card { border-radius: 8px; } .card:hover { opacity: 0.9; }

Schreiben bewirkt nichts, stattdessen Regel ersetzen

const sheet = new CSSStyleSheet();
sheet.insertRule('h1 { color: blue; }');
const rule = sheet.cssRules[0];

rule.cssText = 'h1 { color: green; }'; // wird ignoriert
console.log(rule.cssText);

// Möglichkeit 1: Deklaration über style ändern
rule.style.color = 'green';
console.log(rule.cssText);

// Möglichkeit 2: Regel komplett ersetzen
sheet.deleteRule(0);
sheet.insertRule('h1 { color: purple; font-weight: 400; }', 0);
console.log(sheet.cssRules[0].cssText);

h1 { color: blue; } h1 { color: green; } h1 { color: purple; font-weight: 400; }

Regeln nach Selektor durchsuchen

const findRules = (selectorPart) =>
  [...document.styleSheets].flatMap((sheet) => {
    try {
      return [...sheet.cssRules].filter((r) => r.cssText.includes(selectorPart));
    } catch {
      return []; // Cross-Origin-Stylesheet, nicht lesbar
    }
  });

findRules('.btn').forEach((r) => console.log(r.cssText));

// Wichtig · Fallstricke

Praktisch nur lesbar: Laut CSSOM-Spezifikation hat das Setzen von CSSRule.cssText keine Wirkung. Ältere Browser konnten dabei Ausnahmen werfen. Nicht verwechseln mit CSSStyleDeclaration.cssText (z. B. element.style.cssText oder rule.style.cssText): Diese Eigenschaft ist beschreibbar.
Serialisierung ist browserabhängig: Leerzeichen, Zeilenumbrüche, Farbschreibweisen und die Behandlung von Kurzschreibweisen unterscheiden sich zwischen Chrome, Firefox und Safari. Deshalb nie exakte Strings vergleichen, zum Beispiel in Tests.
Informationsverlust: Kommentare, ungültige Deklarationen, Browser-Hacks und unbekannte Präfix-Eigenschaften fehlen in der Ausgabe. Als verlustfreie Quelle für den Originalquelltext taugt cssText nicht.
Cross-Origin: Bei Stylesheets von fremden Origins ohne CORS-Freigabe wirft schon der Zugriff auf sheet.cssRules einen SecurityError. Solche Zugriffe gehören in try/catch.
Leistung: Jeder Zugriff serialisiert die Regel neu. Bei großen Stylesheets sollte man ihn nicht in Schleifen oder Animationen wiederholen.

Siehe auch

CSSRule CSSStyleSheet CSSStyleSheet.cssRules CSSStyleSheet.prototype.insertRule() CSSStyleSheet.prototype.deleteRule() CSSStyleDeclaration.cssText CSSStyleRule