CSSConditionRule — Schnittstelle · JavaScript-Referenz

Signatur

interface CSSConditionRule extends CSSGroupingRule

Beschreibung

CSSConditionRule ist eine abstrakte Schnittstelle im CSS-Objektmodell (CSSOM). Sie steht für alle At-Regeln, deren Inhalt nur dann greift, wenn eine Bedingung erfüllt ist. Instanzen erzeugt man nie direkt. Man bekommt sie über die konkreten Unterklassen CSSMediaRule (@media), CSSSupportsRule (@supports) und CSSContainerRule (@container).

Von CSSGroupingRule erbt die Schnittstelle die Liste der verschachtelten Regeln cssRules sowie die Methoden insertRule() und deleteRule(). Neu hinzu kommt nur die schreibgeschützte Eigenschaft conditionText. Sie liefert die Bedingung als Text, zum Beispiel (min-width: 600px) oder (display: grid).

Praktisch nutzt man CSSConditionRule vor allem mit instanceof. So findet man beim Durchlaufen eines Stylesheets alle bedingten Regeln auf einmal, ohne jeden Typ einzeln prüfen zu müssen. Das hilft bei Werkzeugen, die Stylesheets untersuchen, Breakpoints auslesen oder Regeln zur Laufzeit ändern.

Parameter

Name	Typ	Default	Beschreibung
$conditionText	string		Eigenschaft (schreibgeschützt): die Bedingung der At-Regel als serialisierter Text, ohne das Schlüsselwort `@media`/`@supports`/`@container`.
$cssRules	CSSRuleList		Geerbt von `CSSGroupingRule`: die Liste der Regeln innerhalb des Bedingungsblocks.
$insertRule(rule, index)	(rule: string, index?: number) => number	index = 0	Geerbt: fügt eine Regel in den Block ein und gibt ihren Index zurück.
$deleteRule(index)	(index: number) => void		Geerbt: entfernt die Regel an der angegebenen Position aus dem Block.

Rückgabewert

Typ

CSSConditionRule

Beschreibung

Wird nicht direkt erzeugt. Man erhält konkrete Unterklassen-Objekte (CSSMediaRule, CSSSupportsRule, CSSContainerRule) aus CSSStyleSheet.cssRules.

Beispiele

Alle bedingten Regeln eines Stylesheets auflisten

const style = document.createElement('style');
style.textContent = `
  body { margin: 0; }
  @media (min-width: 600px) { .card { padding: 2rem; } }
  @supports (display: grid) { .layout { display: grid; } }
`;
document.head.append(style);

for (const rule of style.sheet.cssRules) {
  if (rule instanceof CSSConditionRule) {
    console.log(rule.constructor.name, '→', rule.conditionText);
  }
}

CSSMediaRule → (min-width: 600px) CSSSupportsRule → (display: grid)

Breakpoints aus allen Stylesheets sammeln

const collectConditions = (rules, result = []) => {
  for (const rule of rules) {
    if (rule instanceof CSSConditionRule) {
      result.push(rule.conditionText);
      collectConditions(rule.cssRules, result); // verschachtelte Regeln
    }
  }
  return result;
};

const conditions = [...document.styleSheets].flatMap((sheet) => {
  try {
    return collectConditions(sheet.cssRules);
  } catch {
    return []; // fremde Stylesheets ohne CORS werfen SecurityError
  }
});

console.log([...new Set(conditions)]);

z. B. ["(min-width: 600px)", "(display: grid)"]

Regeln zur Laufzeit in einen Bedingungsblock einfügen

const style = document.createElement('style');
style.textContent = '@media (prefers-color-scheme: dark) { body { background: #111; } }';
document.head.append(style);

const darkRule = style.sheet.cssRules[0];

if (darkRule instanceof CSSConditionRule) {
  const index = darkRule.insertRule('body { color: #eee; }', darkRule.cssRules.length);
  console.log(index, darkRule.cssText);
}

1 @media (prefers-color-scheme: dark) { body { background: rgb(17, 17, 17); } body { color: rgb(238, 238, 238); } }

// Wichtig · Fallstricke

Abstrakt: new CSSConditionRule() wirft einen TypeError. Es gibt keinen Konstruktor.
conditionText ist schreibgeschützt: Frühere Fassungen der Spezifikation erlaubten Schreibzugriff. Heute ignorieren Browser Zuweisungen. Eine Media-Bedingung ändert man über CSSMediaRule.media (MediaList), oder man löscht die Regel und legt sie neu an.
Serialisierung: Der Browser gibt conditionText normalisiert zurück. Leerzeichen, Groß- und Kleinschreibung oder Farbwerte können sich vom Quelltext unterscheiden. Für Vergleiche also nicht blind auf Zeichenketten-Gleichheit setzen.
Sicherheit: Bei Stylesheets von fremden Ursprüngen ohne CORS-Freigabe löst der Zugriff auf cssRules einen SecurityError aus.
Kompatibilität: CSSMediaRule und CSSSupportsRule sind seit Langem überall verfügbar. CSSContainerRule gibt es erst in neueren Browsern (ungefähr ab 2023). In älteren Browsern ist CSSMediaRule möglicherweise noch keine Unterklasse von CSSConditionRule. Dort schlägt die instanceof-Prüfung fehl.

Siehe auch

CSSViewTransitionRule CSSFunctionRule CSSContainerRule CSSPositionTryRule CSSPositionValue