CSSContainerRule.containerQuery — Eigenschaft · JavaScript-Referenz

Signatur

CSSContainerRule.containerQuery

Beschreibung

Die Eigenschaft containerQuery eines CSSContainerRule-Objekts gibt nur den Abfrage-Teil einer @container-Regel zurück. Bei der Regel @container sidebar (min-width: 400px) { … } liefert containerQuery den Wert "(min-width: 400px)". Der Name sidebar steht getrennt in containerName.

Das ist der Unterschied zur geerbten Eigenschaft conditionText aus CSSConditionRule. Sie enthält die ganze Bedingung mit Name, also "sidebar (min-width: 400px)". Mit containerQuery muss man diese Zeichenkette nicht selbst zerlegen, um nur die Größen- oder Stilbedingung zu bekommen.

Typische Einsatzfälle sind Werkzeuge, die Stylesheets auswerten: Debug-Overlays, Linter, Übersichten über alle Container-Breakpoints einer Seite oder Polyfills, die Container-Abfragen per JavaScript nachbilden. Die Eigenschaft ist nur lesbar. Um die Bedingung zu ändern, muss man die Regel löschen und mit CSSStyleSheet.insertRule() neu einfügen.

Rückgabewert

Typ

string

Beschreibung

Die vom Browser serialisierte Abfrage der Container-Bedingung ohne den Container-Namen, z. B. "(min-width: 400px)" oder "style(--theme: dark)".

Beispiele

Abfrage-Teil einer Container-Regel auslesen

const style = document.createElement('style');
style.textContent = `
  .card-wrapper { container: sidebar / inline-size; }
  @container sidebar (min-width: 400px) {
    .card { display: grid; }
  }
`;
document.head.append(style);

const rule = [...style.sheet.cssRules]
  .find((r) => r instanceof CSSContainerRule);

console.log(rule.containerName);  // Name
console.log(rule.containerQuery); // nur die Abfrage
console.log(rule.conditionText);  // ganze Bedingung

sidebar (min-width: 400px) sidebar (min-width: 400px)

Alle Container-Breakpoints der Seite auflisten

const collectContainerQueries = (rules, result = []) => {
  for (const rule of rules) {
    if (rule instanceof CSSContainerRule) {
      result.push({
        name: rule.containerName || '(unbenannt)',
        query: rule.containerQuery,
      });
    }
    // In verschachtelten Regeln (@media, @supports, @layer) weitersuchen
    if (rule.cssRules) collectContainerQueries(rule.cssRules, result);
  }
  return result;
};

const all = [];
for (const sheet of document.styleSheets) {
  try {
    collectContainerQueries(sheet.cssRules, all);
  } catch {
    // Fremd-Stylesheet ohne CORS: Zugriff auf cssRules verweigert
  }
}
console.table(all);

Tabelle mit Spalten name/query, z. B. sidebar | (min-width: 400px)

Regel ohne Container-Namen

const sheet = new CSSStyleSheet();
sheet.replaceSync('@container (width > 30em) { h2 { font-size: 2rem; } }');

const [rule] = sheet.cssRules;
console.log(JSON.stringify(rule.containerName));
console.log(rule.containerQuery);

"" (width > 30em)

// Wichtig · Fallstricke

Nur lesbar: Wer containerQuery etwas zuweist, ändert nichts. Im Strict Mode wird ein TypeError ausgelöst. Zum Ändern die Regel mit deleteRule() entfernen und mit insertRule() neu einfügen.
Normalisierung: Der Wert ist die vom Browser serialisierte Form, nicht der Originaltext aus dem Quellcode. Leerzeichen, Groß- und Kleinschreibung oder Einheiten können abweichen. Deshalb nicht exakt gegen den Quelltext vergleichen.
Mehrere Bedingungen: Die Eigenschaft ist für Regeln mit einer Container-Bedingung gedacht. Bei Regeln mit mehreren, durch Komma getrennten Bedingungen (neuere Spezifikation) ist das Ergebnis nicht aussagekräftig. Dort die neuere Eigenschaft conditions verwenden, sofern der Browser sie unterstützt, oder conditionText auswerten.
Stylesheets von fremden Ursprüngen: Beim Zugriff auf cssRules eines Cross-Origin-Stylesheets ohne passende CORS-Header wird ein SecurityError ausgelöst. Den Zugriff deshalb in try…catch einschließen.
Kompatibilität: Verfügbar ab Chrome/Edge 111, Firefox 110 und Safari 16.4. In älteren Browsern vorher prüfen, z. B. mit 'containerQuery' in CSSContainerRule.prototype.

Siehe auch

CSSContainerRule.conditions CSSContainerRule.containerName CSSConditionRule.conditionText CSSFontFaceRule.style ServiceWorkerContainer.ready