CSSContainerRule: containerQuery-Eigenschaft

Wert

Eine Zeichenfolge mit dem Abfrageteil der Container-Bedingung einer Container-Regel, sofern diese genau eine Container-Bedingung definiert. Der Wert muss nicht mit der ursprünglichen Zeichenfolge übereinstimmen, da er normalisiert werden kann, beispielsweise durch das Entfernen von Leerzeichen.

Wenn keine Abfrage definiert ist oder die Regel mehrere Container-Bedingungen definiert, ist der Wert die leere Zeichenfolge ("").

Beschreibung

Diese Eigenschaft gibt den Abfrageteil der Container-Bedingung einer entsprechenden @container-At-Regel wieder, die genau eine Container-Bedingung enthält.

Beispielsweise lautet der Wert von containerQuery für die folgende @container-Regel (width >= 700px):

@container sidebar (width >= 700px) {
  /* Styles */
}

Beispiele

Grundlegende Verwendung

Das folgende Beispiel definiert eine @container-Regel mit einer einzigen Container-Bedingung und zeigt die Eigenschaften der zugehörigen CSSContainerRule an. Das CSS ähnelt stark dem im @container-Beispiel Benannte Container-Kontexte erstellen.

<pre id="log"></pre>

const logElement = document.querySelector("#log");
function log(text) {
  logElement.innerText = `${logElement.innerText}${text}\n`;
  logElement.scrollTop = logElement.scrollHeight;
}

#log {
  height: 100px;
  overflow: scroll;
  padding: 0.5rem;
  border: 1px solid black;
}

HTML

Zunächst definieren wir das HTML für eine card innerhalb eines post. Diese werden durch zwei ineinander verschachtelte <div>-Elemente dargestellt.

<div class="post">
  <div class="card">
    <h2>Card title</h2>
    <p>Card content</p>
  </div>
</div>

CSS

Das CSS für das Container-Element legt den Typ und den Namen des Containers fest. Die Karte hat eine Standardschriftgröße. Für den @container mit dem Namen sidebar wird sie überschrieben, wenn dessen Breite mindestens 700px beträgt.

<style id="example-styles">
  .post {
    container-type: inline-size;
    container-name: sidebar;
  }

  /* Default heading styles for the card title */
  .card h2 {
    font-size: 1em;
  }

  @container sidebar (width >= 700px) {
    .card {
      font-size: 2em;
    }
  }
</style>

JavaScript

Der folgende Code ermittelt anhand seiner id das zum Beispiel gehörende HTMLStyleElement und verwendet anschließend dessen Eigenschaft sheet, um das CSSStyleSheet abzurufen. Aus dem CSSStyleSheet rufen wir die Menge der dem Stylesheet hinzugefügten cssRules ab. Da wir die @container-Regel oben als dritte Regel hinzugefügt haben, können wir über den dritten Eintrag (Index „2“) in cssRules auf die zugehörige CSSContainerRule zugreifen.

const exampleStylesheet = document.getElementById("example-styles").sheet;
const exampleRules = exampleStylesheet.cssRules;
const containerRule = exampleRules[2]; // a CSSContainerRule representing the container rule.

Anschließend verwenden wir containerRule, um die Abfrage der Container-Bedingung zu protokollieren. Wenn der Browser CSSContainerRule.conditions unterstützt, zeigen wir auch den darüber verfügbaren Namen und die Abfrage an.

log(`CSSContainerRule.containerQuery: "${containerRule.containerQuery}"`);

if ("conditions" in CSSContainerRule.prototype) {
  log("CSSContainerRule.conditions:");
  containerRule.conditions.forEach((item) => {
    const jsonString = JSON.stringify(item);
    log(`  ${jsonString}`);
  });
}

Ergebnisse

Die Ausgabe des Beispiels ist unten zu sehen. Der Protokollbereich zeigt mithilfe von containerQuery die Abfrage der einzigen Container-Bedingung an. Falls unterstützt, zeigt er außerdem den Namen und die Abfrage mithilfe der Eigenschaft conditions an.

Der Text im <div> der Karte sollte doppelt so groß werden, sobald die Seitenbreite 700px erreicht, und wieder auf die Hälfte schrumpfen, wenn sie unter 700px fällt.

Mehrere Container-Bedingungen

Das folgende Beispiel entspricht fast vollständig dem vorherigen, mit dem Unterschied, dass das CSS mehrere Container-Bedingungen angibt.

Das HTML ist ausgeblendet, da es mit dem des vorherigen Beispiels identisch ist.

<pre id="log"></pre>

const logElement = document.querySelector("#log");
function log(text) {
  logElement.innerText = `${logElement.innerText}${text}\n`;
  logElement.scrollTop = logElement.scrollHeight;
}

#log {
  height: 100px;
  overflow: scroll;
  padding: 0.5rem;
  border: 1px solid black;
}

<div class="post">
  <div class="card">
    <h2>Card title</h2>
    <p>Card content</p>
  </div>
</div>

CSS

Die Karte hat eine Standardschriftgröße. Für den @container mit dem Namen sidebar wird sie überschrieben, wenn dessen Breite mindestens 700px beträgt oder der Container den Namen other-name hat. Diese Bedingung wurde nur gewählt, um die Auswirkungen mehrerer Bedingungen zu demonstrieren; sie beeinflusst das Verhalten des Beispiels nicht.

<style id="example-styles">
  .post {
    container-type: inline-size;
    container-name: sidebar;
  }

  /* Default heading styles for the card title */
  .card h2 {
    font-size: 1em;
  }

  @container sidebar (width >= 700px), other-name {
    .card {
      font-size: 2em;
    }
  }
</style>

JavaScript

Der folgende Code ermittelt anhand seiner id das zum Beispiel gehörende HTMLStyleElement und verwendet anschließend dessen Eigenschaft sheet, um das CSSStyleSheet abzurufen. Aus dem CSSStyleSheet rufen wir die Menge der dem Stylesheet hinzugefügten cssRules ab. Da wir die @container-Regel oben als dritte Regel hinzugefügt haben, können wir über den dritten Eintrag (Index „2“) in cssRules auf die zugehörige CSSContainerRule zugreifen.

const exampleStylesheet = document.getElementById("example-styles").sheet;
const exampleRules = exampleStylesheet.cssRules;
const containerRule = exampleRules[2]; // a CSSContainerRule representing the container rule.

Der Code unterscheidet sich geringfügig vom vorherigen Fall: Wenn der Browser mehrere Container-Bedingungen nicht unterstützt, ist containerRule undefined. Deshalb protokollieren wir den Wert von containerQuery nur, wenn der Browser mehrere Container-Bedingungen unterstützt. Der Wert ist dann die leere Zeichenfolge.

if (!containerRule) {
  // Browser doesn't support multiple container conditions
  log(
    "No CSSContainerRule was created. This browser doesn't support @container with multiple conditions.",
  );
} else {
  log(`CSSContainerRule.containerQuery: "${containerRule.containerQuery}"`);
}

if ("conditions" in CSSContainerRule.prototype) {
  log("CSSContainerRule.conditions:");
  containerRule.conditions.forEach((item) => {
    const jsonString = JSON.stringify(item);
    log(`  ${jsonString}`);
  });
}

Weitere Informationen und Beispiele finden Sie unter Feature-Erkennung in CSSContainerRule.

Ergebnisse

Die Ausgabe des Beispiels ist unten zu sehen. Wenn der Browser mehrere Container-Bedingungen nicht unterstützt, existiert die Regel überhaupt nicht. Andernfalls ist der Wert von containerQuery die leere Zeichenfolge.

Spezifikationen

Browser-Kompatibilität

Siehe auch

• Die CSS-Kurzschreibweise container
• CSS-Containment-Modul
• Container-Abfragen
• Container-Größen- und Stilabfragen verwenden