CSSContainerRule: containerQuery Eigenschaft

Baseline 2023

Newly available

Since ⁨September 2023⁩, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

Die schreibgeschützte containerQuery Eigenschaft des CSSContainerRule Interfaces gibt einen String zurück, der die Containerbedingungen repräsentiert, die ausgewertet werden, wenn der Container seine Größe ändert, um festzustellen, ob die Stile im zugehörigen @container angewendet werden.

Zum Beispiel ist der Wert von containerQuery für das folgende @container (width >= 700px):

css

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

Wert

Ein String, der die Containeranfrage enthält.

Beachten Sie, dass der Wert möglicherweise nicht mit dem ursprünglichen String identisch ist, da Normalisierungen wie das Entfernen von Leerzeichen passieren können.

Beispiele

Das folgende Beispiel definiert eine unbenannte @container Regel und zeigt die Eigenschaften der zugehörigen CSSContainerRule. Das CSS ist dasselbe wie im @container Beispiel Stile basierend auf der Größe eines Containers festlegen.

<div id="log">
  <h2>Log</h2>
  <ul></ul>
  <hr />
</div>

// Store reference to log list
const logList = document.querySelector("#log ul");
// Function to log data from underlying source
function log(result) {
  const listItem = document.createElement("li");
  listItem.textContent = result;
  logList.appendChild(listItem);
}

Zuerst definieren wir das HTML für eine card (<div>), die in einem post enthalten ist.

html

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

Das CSS für das Containerelement spezifiziert den Typ des Containers. Das @container wendet dann eine neue Breite, Schriftgröße und Hintergrundfarbe auf das enthaltene Element "card" an, wenn die Breite weniger als 650px beträgt.

html

<style id="example-styles">
  /* A container context based on inline size */
  .post {
    container-type: inline-size;
  }

  /* Apply styles if the container is narrower than 650px */
  @container (width < 650px) {
    .card {
      width: 50%;
      background-color: gray;
      font-size: 1em;
    }
  }
</style>

Der untenstehende Code erhält das HTMLStyleElement, das mit dem Beispiel über seine ID verknüpft ist, und verwendet dann seine sheet Eigenschaft, um das StyleSheet zu erhalten. Von dem StyleSheet erhalten wir die Menge der cssRules, die dem Blatt hinzugefügt wurden. Da wir das @container als die zweite Regel oben hinzugefügt haben, können wir die zugehörige CSSContainerRule mit dem zweiten Eintrag (mit Index "1") in den cssRules zugreifen. Zum Schluss loggen wir den Container-Namen und die Abfrageeigenschaften.

const exampleStylesheet = document.getElementById("example-styles").sheet;
const exampleRules = exampleStylesheet.cssRules;
const containerRule = exampleRules[1]; // a CSSContainerRule representing the container rule.
log(`CSSContainerRule.containerQuery: "${containerRule.containerQuery}"`);

Das Beispielergebnis wird unten gezeigt. Der Log-Abschnitt listet den Abfrage-String auf. Die Karte sollte den Hintergrund ändern, während die Breite der Seite den Übergang durch 650px durchläuft.

Spezifikationen

Specification
CSS Conditional Rules Module Level 5 # dom-csscontainerrule-containerquery

Browser-Kompatibilität

Siehe auch

Help improve MDN

Learn how to contribute Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden