CSSConditionRule.conditionText — Eigenschaft · JavaScript-Referenz

Signatur

get CSSConditionRule.conditionText

Beschreibung

conditionText ist eine schreibgeschützte Eigenschaft des abstrakten Interfaces CSSConditionRule. Sie gibt den Text der Bedingung zurück, also alles zwischen dem At-Keyword und der öffnenden geschweiften Klammer. Bei @media (min-width: 600px) { … } ist das zum Beispiel "(min-width: 600px)".

Weil CSSConditionRule abstrakt ist, arbeitet man in der Praxis mit den Unterklassen CSSMediaRule, CSSSupportsRule und CSSContainerRule. Mit rule instanceof CSSConditionRule prüfen Sie, ob eine Regel bedingt ist. Danach können Sie die Bedingung auslesen, egal welcher Typ die Regel genau ist.

Typische Einsatzfälle sind Werkzeuge, die Stylesheets untersuchen, etwa Debugging-Helfer, Style-Linter, Polyfills oder Tests, die prüfen, welche Breakpoints ein Stylesheet definiert. Der Wert wird vom Browser serialisiert, also normalisiert: Leerzeichen, Groß- und Kleinschreibung und Klammern können vom Quelltext abweichen.

Ältere Entwürfe der Spezifikation erlaubten, conditionText zu setzen. In der aktuellen Spezifikation (CSS Conditional Rules) ist die Eigenschaft aber nur lesbar. Um eine Bedingung zu ändern, nutzen Sie bei Media-Regeln CSSMediaRule.media.mediaText. Andere Regeln entfernen Sie und fügen sie neu ein.

Rückgabewert

Typ

string

Beschreibung

Der serialisierte Bedingungstext der Regel, z. B. "(min-width: 600px)" für eine @media-Regel oder "(display: grid)" für eine @supports-Regel.

Beispiele

Bedingungen eines Stylesheets auslesen

const sheet = new CSSStyleSheet();
sheet.replaceSync(`
  @media (min-width: 600px) { body { font-size: 18px; } }
  @supports (display: grid) { .raster { display: grid; } }
  .karte { padding: 1rem; }
`);

for (const rule of sheet.cssRules) {
  if (rule instanceof CSSConditionRule) {
    console.log(`${rule.constructor.name}: ${rule.conditionText}`);
  }
}

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

Alle Breakpoints der Seite sammeln (auch verschachtelte Regeln)

const sammleBedingungen = (rules, ergebnis = []) => {
  for (const rule of rules) {
    if (rule instanceof CSSConditionRule) {
      ergebnis.push({ typ: rule.constructor.name, bedingung: rule.conditionText });
    }
    // Gruppierende Regeln können weitere Regeln enthalten
    if (rule.cssRules) sammleBedingungen(rule.cssRules, ergebnis);
  }
  return ergebnis;
};

const alle = [...document.styleSheets].flatMap((sheet) => {
  try {
    return sammleBedingungen(sheet.cssRules);
  } catch {
    // Fremd-Origin-Stylesheets ohne CORS werfen einen SecurityError
    console.warn('Nicht lesbar:', sheet.href);
    return [];
  }
});

console.table(alle);

Tabelle mit allen @media-, @supports- und @container-Bedingungen der Seite

Bedingung ändern: conditionText ist nur lesbar

'use strict';
const sheet = new CSSStyleSheet();
sheet.replaceSync('@media (min-width: 600px) { body { color: navy; } }');
const mediaRule = sheet.cssRules[0];

try {
  mediaRule.conditionText = '(min-width: 900px)';
} catch (err) {
  console.log(err.name); // Zuweisung an einen reinen Getter
}

// Richtiger Weg für Media-Regeln:
mediaRule.media.mediaText = '(min-width: 900px)';
console.log(mediaRule.conditionText);

// Bei @supports: Regel entfernen und neu einfügen
sheet.insertRule('@supports (display: grid) { .a { display: grid; } }', 1);
sheet.deleteRule(1);
sheet.insertRule('@supports (display: flex) { .a { display: flex; } }', 1);
console.log(sheet.cssRules[1].conditionText);

TypeError (min-width: 900px) (display: flex)

// Wichtig · Fallstricke

Schreibschutz: Im Strict Mode, also auch in ES-Modulen und Klassen, wirft eine Zuweisung an conditionText einen TypeError. Außerhalb des Strict Mode wird sie stillschweigend ignoriert. Manche älteren Browser-Versionen erlaubten das Setzen noch. Verlassen Sie sich darauf nicht.
Normalisierung: Der Rückgabewert ist serialisiert und muss nicht zeichengenau dem Quelltext entsprechen. Für Vergleiche sollten Sie deshalb nicht exakt auf den Originaltext prüfen.
Fremde Stylesheets: Stylesheets von anderen Origins ohne passende CORS-Header können nicht gelesen werden. Schon der Zugriff auf sheet.cssRules wirft dann einen SecurityError. Den Zugriff in try…catch einschließen.
Kompatibilität: Bei @media und @supports wird die Eigenschaft von allen modernen Browsern unterstützt. CSSContainerRule ist neuer (etwa ab Chrome 105, Safari 16, Firefox 110). Konstruierbare Stylesheets mit new CSSStyleSheet() und replaceSync() gibt es in Safari erst ab 16.4.
Bei CSSMediaRule entspricht conditionText dem Wert von media.mediaText.

Siehe auch

CSS.supports() CSSContainerRule.conditions CSSFunctionRule.returnType CSSContainerRule.containerName CSSContainerRule.containerQuery