CSSContainerRule: containerQuery-Eigenschaft

Baseline 2023

Neu verfügbar

Seit September 2023 funktioniert diese Funktion auf aktuellen Geräten und in aktuellen Browserversionen. Auf älteren Geräten oder in älteren Browsern funktioniert sie möglicherweise nicht.

Die schreibgeschützte containerQuery-Eigenschaft der Schnittstelle CSSContainerRule gibt einen String zurück, der die Container-Bedingungen repräsentiert, die ausgewertet werden, wenn sich die Containergröße ändert, um zu bestimmen, ob die Stile im zugehörigen @container angewendet werden.

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

css

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

Wert

Ein String, der die Containerabfrage enthält.

Beachten Sie, dass der Wert nicht identisch mit dem ursprünglichen String sein muss, da Normalisierungen wie das Entfernen von Leerzeichen auftreten können.

Beispiele

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

<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 legt den Typ des Containers fest. Das @container wendet dann eine neue Breite, Schriftgröße und Hintergrundfarbe auf das enthaltene Element "card" an, wenn die Breite kleiner als 650px ist.

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 folgende Code ruft das mit dem Beispiel verknüpfte HTMLStyleElement über seine ID ab und verwendet dann dessen sheet-Eigenschaft, um das StyleSheet zu erhalten. Aus dem StyleSheet erhalten wir die Menge der cssRules, die dem Sheet hinzugefügt wurden. Da wir das @container als zweite Regel oben hinzugefügt haben, können wir auf das zugehörige CSSContainerRule über den zweiten Eintrag (mit Index "1") in den cssRules zugreifen. Schließlich protokollieren wir die Container-Name- und 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 Beispielausgabe ist unten gezeigt. Der Protokollabschnitt listet den Abfrage-String auf. Die Karte sollte den Hintergrund ändern, während die Breite der Seite die 650px-Grenze überschreitet.

Spezifikationen

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

Browser-Kompatibilität

Siehe auch

Help improve MDN

Erfahren Sie, wie Sie beitragen können Diese Seite wurde automatisch aus dem Englischen übersetzt.

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