CSSGroupingRule.cssRules — Eigenschaft · JavaScript-Referenz

Signatur

CSSGroupingRule.cssRules

Beschreibung

Die schreibgeschützte Eigenschaft cssRules der Schnittstelle CSSGroupingRule liefert eine CSSRuleList mit allen Regeln, die innerhalb einer Gruppierungsregel stehen. Gruppierungsregeln sind z. B. @media (CSSMediaRule), @supports (CSSSupportsRule), @container (CSSContainerRule), @layer-Blöcke (CSSLayerBlockRule) und @scope. In neueren Browsern ist auch CSSStyleRule eine Gruppierungsregel, da CSS-Verschachtelung (Nesting) unterstützt wird.

Man benutzt cssRules, um Stylesheets zur Laufzeit zu untersuchen oder zu durchsuchen: etwa um alle Regeln innerhalb eines bestimmten Media-Querys aufzulisten, Selektoren zu finden oder Werte gezielt zu ändern. Da Gruppierungsregeln beliebig tief verschachtelt sein können, durchläuft man sie typischerweise rekursiv.

Die Liste ist live: Änderungen durch insertRule() oder deleteRule() an derselben Gruppierungsregel spiegeln sich sofort wider. Die Eigenschaft selbst kann nicht zugewiesen werden; Regeln fügt man über die Methoden von CSSGroupingRule hinzu oder entfernt sie.

Rückgabewert

Typ

CSSRuleList

Beschreibung

Eine live aktualisierte, array-ähnliche Liste von CSSRule-Objekten (mit length und item(index) bzw. Indexzugriff), die die verschachtelten Regeln enthält.

Beispiele

Regeln innerhalb einer @media-Regel auflisten

const style = document.createElement('style');
style.textContent = `
  body { margin: 0; }
  @media (max-width: 600px) {
    .nav { display: none; }
    .menu-btn { display: block; }
  }
`;
document.head.append(style);

const sheet = style.sheet;
const mediaRule = [...sheet.cssRules].find((r) => r instanceof CSSMediaRule);

console.log(mediaRule.conditionText);
for (const rule of mediaRule.cssRules) {
  console.log(rule.cssText);
}

(max-width: 600px) .nav { display: none; } .menu-btn { display: block; }

Alle Stilregeln rekursiv durchsuchen

// Sammelt alle CSSStyleRule-Objekte, auch in verschachtelten Gruppen
const collectStyleRules = (ruleList, result = []) => {
  for (const rule of ruleList) {
    if (rule instanceof CSSStyleRule) result.push(rule);
    // CSSGroupingRule enthält selbst wieder cssRules
    if (rule instanceof CSSGroupingRule) {
      collectStyleRules(rule.cssRules, result);
    }
  }
  return result;
};

const style = document.createElement('style');
style.textContent = `
  @supports (display: grid) {
    @media (min-width: 800px) { .grid { display: grid; } }
  }
`;
document.head.append(style);

const rules = collectStyleRules(style.sheet.cssRules);
console.log(rules.map((r) => r.selectorText));

[".grid"]

Live-Verhalten nach insertRule()

const style = document.createElement('style');
style.textContent = '@media print { h1 { color: black; } }';
document.head.append(style);

const printRule = style.sheet.cssRules[0];
const list = printRule.cssRules;
console.log(list.length);

printRule.insertRule('nav { display: none; }', list.length);
console.log(list.length);
console.log(list[1].cssText);

1 2 nav { display: none; }

// Wichtig · Fallstricke

CSSRuleList ist kein echtes Array: Methoden wie map() oder filter() fehlen. Mit [...rule.cssRules] oder Array.from() umwandeln; for...of funktioniert direkt.
Bei Stylesheets von fremden Ursprüngen (Cross-Origin ohne CORS) wirft bereits der Zugriff auf CSSStyleSheet.cssRules einen SecurityError – man gelangt dann gar nicht erst an die Gruppierungsregeln.
Die Eigenschaft ist schreibgeschützt; eine Zuweisung wird ignoriert (im Strict Mode TypeError).
CSSGroupingRule als gemeinsame Basisschnittstelle wird von allen modernen Browsern unterstützt. Dass CSSStyleRule davon erbt (CSS-Nesting), gibt es erst in neueren Versionen (etwa Chrome 112+, Safari 16.5+, Firefox 117+) – in älteren Browsern hat CSSStyleRule keine cssRules.
Der Browser verwirft ungültige Regeln bereits beim Parsen – sie tauchen in cssRules nicht auf.

Siehe auch

CSSContainerRule.containerQuery CSSKeyframesRule.cssRules CSSPageRule.style CSSStyleSheet.cssRules CSSFontFaceRule.style