CSSContainerRule

Instanz-Eigenschaften

Erbt Eigenschaften von seinen Vorfahren CSSConditionRule, CSSGroupingRule und CSSRule.

CSSContainerRule.conditions Schreibgeschützt

Gibt ein Array von Objekten zurück, von denen jedes eine Container-Bedingung in einer @container-Regel angibt. Die Objekte haben eine name-Eigenschaft und eine query-Eigenschaft, von denen jede der leere String sein kann, wenn sie nicht definiert ist. Der name repräsentiert den Namen eines Containers, und die query repräsentiert die Menge der Feature-Tests, die wahr sein müssen, damit die bestimmte Bedingung gilt.

CSSContainerRule.containerName Schreibgeschützt

Gibt einen String zurück, der den Namen der Container-Bedingung eines @container darstellt, wenn es nur eine Bedingung gibt. Wenn es mehrere Container-Bedingungen gibt oder wenn es nur eine Bedingung gibt, die keinen Namen angibt, ist dies der leere String.

CSSContainerRule.containerQuery Schreibgeschützt

Gibt einen String zurück, der die Container-Abfrage für die Container-Bedingung eines @container darstellt, wenn es nur eine Bedingung gibt. Dies repräsentiert eine Menge von Feature-Tests, die alle wahr sein müssen, damit die Bedingung gilt. Wenn es mehrere Container-Bedingungen gibt oder wenn es nur eine Bedingung gibt, die keine Abfrage angibt, ist dies der leere String.

Instanz-Methoden

Keine spezifischen Methoden; erbt Methoden von seinen Vorfahren CSSConditionRule, CSSGroupingRule und CSSRule.

Beschreibung

Ein CSSContainerRule-Objekt repräsentiert eine @container-Regel.

Eine @container-Regel definiert eine oder mehrere durch Kommas getrennte Container-Bedingungen. Jede Container-Bedingung besteht aus einem "Namen" und/oder einer "Abfrage", wobei der "Name" den Namen des Containers angibt, auf den die Bedingung angewendet wird, und die "Abfrage" eine oder mehrere logisch kombinierte Feature-Überprüfungen auf den Eigenschaften eines Containers spezifiziert. Wenn eine der Container-Bedingungen mit einem Container übereinstimmt, werden die angegebenen Stile angewendet.

Ein konstruierte Beispiel, bestehend aus drei Bedingungen, wird unten gezeigt. Dieses wird mit einem Container namens main-content übereinstimmen, wenn die Breite zwischen 600px und 800px liegt, mit jedem Container, der eine Höhe größer als 800px hat, oder mit jedem Container namens other-content.

@container main-content (width > 600px) and (width < 800px), (height > 800px), other-content {
  /* Apply styles */
}

In unterstützenden Browsern repräsentiert die CSSContainerRule.conditions-Eigenschaft eine @container als ein Array von Objekten, von denen jedes eine einzelne Container-Bedingung definiert. Die Objekte haben die Eigenschaften name und query, die der leere String ("") sein können. Die conditions-Eigenschaft für das obige @container-Beispiel würde so aussehen:

[
  { name: "main-content", query: "(width > 600px) and (width < 800px)" },
  { name: "", query: "(height > 800px)" },
  { name: "other-content", query: "" },
];

Die containerName- und containerQuery-Eigenschaften stammen aus der Zeit vor der Unterstützung von Container-Regeln mit mehreren Container-Bedingungen. Für eine Container-Regel mit einer einzelnen Container-Bedingung enthalten sie den Namen und die Abfrage dieser Bedingung (entsprechend den name- und query-Eigenschaften des Objekts im conditions-Array). Für eine Container-Regel mit mehreren Bedingungen sind sie beide auf den leeren String gesetzt.

Beachten Sie, dass Browser, die die conditions-Eigenschaft nicht unterstützen, nur Container-Regeln mit einer einzelnen Container-Bedingung erlauben. Ein @container mit mehreren Container-Bedingungen wird nicht geparst, und es wird keine entsprechende CSSContainerRule erstellt.

Sie können den Text für die gesamte Bedingung auch mit CSSConditionRule.conditionText abrufen.

Beispiele

Feature-Testing

Feature-Testing kann kompliziert sein, da Sie möglicherweise Fälle behandeln müssen, in denen CSSContainerRule oder CSSContainerRule.conditions nicht unterstützt werden, sowie den speziellen Fall, in dem conditions nicht unterstützt wird, aber mehrere Container-Bedingungen in der CSS angegeben wurden.

Dieser Code zeigt, wie Sie dies tun können, vorausgesetzt, Sie haben bereits containerRule erhalten, eine CSSContainerRule-Instanz, die einer @container-Regel entspricht, die in der Seiten-CSS definiert ist (das nächste Beispiel zeigt, wie Sie containerRule erhalten könnten).

if (typeof CSSContainerRule === "undefined") {
  // Browser doesn't support CSSContainerRule (at all)
  log("CSSContainerRule is not supported in this browser.");
} else if (!containerRule) {
  // Browser doesn't support multiple container conditions
  log(
    "No CSSContainerRule was created — @container with multiple conditions may not be parsed.",
  );
} else if ("conditions" in CSSContainerRule.prototype) {
  log("CSSContainerRule.conditions is supported.");
  log("CSSContainerRule.conditions:");
  containerRule.conditions.forEach((item) => {
    const jsonString = JSON.stringify(item);
    log(`  ${jsonString}`);
  });
  log(`CSSContainerRule.conditionText: "${containerRule.conditionText}"`);
} else {
  // @container exists but predates the multi-condition specification
  log("CSSContainerRule.conditions not supported");
  log(`CSSContainerRule.containerName: "${containerRule.containerName}"`);
  log(`CSSContainerRule.containerQuery: "${containerRule.containerQuery}"`);
  log(`CSSContainerRule.conditionText: "${containerRule.conditionText}"`);
}

Beachten Sie, dass wir, wenn es definiert ist, die Informationen in CSSContainerRule.conditions gegenüber containerName und containerQuery bevorzugen.

Unbenannte Container-Bedingung

Das untenstehende Beispiel definiert eine @container-Regel, die eine einzelne Container-Bedingung ohne Namen hat, und zeigt die Eigenschaften der zugehörigen CSSContainerRule. Die CSS ist dieselbe wie im @container-Beispiel Stile basierend auf der Größe eines Containers festlegen.

Beachten Sie, dass unser Code, um die Ergebnisse zu protokollieren, nicht besonders relevant ist, daher wurde er ausgeblendet.

<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

Zuerst definieren wir das HTML für eine card, die in einem post enthalten ist. Diese werden durch zwei verschachtelte <div>-Elemente dargestellt.

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

CSS

Die CSS für das Beispiel wird unten gezeigt. Die CSS gibt zunächst den container-type für das Container-Element (post) an. Die @container-Regel wendet dann eine neue width, background-color und font-size auf die Karte an, wenn die Breite kleiner als 650px ist.

<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>

JavaScript

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. Aus dem StyleSheet erhalten wir die Menge der cssRules, die dem Blatt hinzugefügt wurden. Da wir die @container als zweite Regel oben hinzugefügt haben, können wir die zugehörige CSSContainerRule mit dem zweiten Eintrag, mit dem Index "1" in den cssRules, zugreifen.

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

Als nächstes verwenden wir unseren Feature-Testing-Code aus dem vorherigen Beispiel, um die Informationen zu finden und zu protokollieren, die wir anzeigen möchten.

if (typeof CSSContainerRule === "undefined") {
  // Browser doesn't support CSSContainerRule (at all)
  log("CSSContainerRule is not supported in this browser.");
} else if (!containerRule) {
  // Browser doesn't support multiple container conditions
  log(
    "No CSSContainerRule was created. This browser doesn't support @container with multiple conditions.",
  );
} else if ("conditions" in CSSContainerRule.prototype) {
  log("CSSContainerRule.conditions is supported.");
  log("CSSContainerRule.conditions:");
  containerRule.conditions.forEach((item) => {
    const jsonString = JSON.stringify(item);
    log(`  ${jsonString}`);
  });
  log(`CSSContainerRule.conditionText: "${containerRule.conditionText}"`);
} else {
  // @container exists but predates the multi-condition specification
  log("CSSContainerRule.conditions not supported");
  log(`CSSContainerRule.containerName: "${containerRule.containerName}"`);
  log(`CSSContainerRule.containerQuery: "${containerRule.containerQuery}"`);
  log(`CSSContainerRule.conditionText: "${containerRule.conditionText}"`);
}

Ergebnisse

Das Beispiel-Ergebnis wird unten gezeigt. Dies listet die Bedingung entweder unter Verwendung der conditions-Eigenschaft auf, wenn sie unterstützt wird, oder containerName/containerQuery, wenn nicht.

Beachten Sie, dass sich die background-color der Karte ändern sollte, wenn die Containerbreite kleiner oder größer als 650px wird.

Benannte Container-Bedingung

Das untenstehende Beispiel definiert eine @container-Regel, die einen Namen und eine Abfrage beinhaltet, und zeigt die Eigenschaften der zugehörigen CSSContainerRule.

Die CSS ist sehr ähnlich zu der im @container-Beispiel Erstellen benannter Container-Kontexte. Beachten Sie, dass wir den HTML-, Protokollierungs- und Feature-Check-Code ausgeblendet haben, da sie im vorherigen Beispiel identisch sind.

<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

In diesem Beispiel spezifiziert die @container einen Container-Namen, sidebar, sowie den Container-Typ. Die Karte hat eine Standard-Schriftgröße, die überschrieben wird, wenn sie sich in einem sidebar-@container mit einer Breite größer oder gleich 700px befindet.

<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>

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

if (typeof CSSContainerRule === "undefined") {
  // Browser doesn't support CSSContainerRule (at all)
  log("CSSContainerRule is not supported in this browser.");
} else if (!containerRule) {
  // Browser doesn't support multiple container conditions
  log(
    "No CSSContainerRule was created. This browser doesn't support @container with multiple conditions.",
  );
} else if ("conditions" in CSSContainerRule.prototype) {
  log("CSSContainerRule.conditions is supported.");
  log("CSSContainerRule.conditions:");
  containerRule.conditions.forEach((item) => {
    const jsonString = JSON.stringify(item);
    log(`  ${jsonString}`);
  });
  log(`CSSContainerRule.conditionText: "${containerRule.conditionText}"`);
} else {
  // @container exists but predates the multi-condition specification
  log("CSSContainerRule.conditions not supported");
  log(`CSSContainerRule.containerName: "${containerRule.containerName}"`);
  log(`CSSContainerRule.containerQuery: "${containerRule.containerQuery}"`);
  log(`CSSContainerRule.conditionText: "${containerRule.conditionText}"`);
}

Ergebnisse

Das Beispiel-Ergebnis wird unten gezeigt. Dies listet die Bedingung entweder unter Verwendung der conditions-Eigenschaft auf, wenn sie unterstützt wird, oder containerName/containerQuery, wenn nicht. Der conditionText wird ebenfalls protokolliert und zeigt die Kombination dieser beiden Zeichenfolgen.

Der Text im Karten-<div> sollte sich verdoppeln, wenn die Seitenbreite 700px erreicht, und halbieren, wenn sie wieder unter 700px fällt.

Mehrere Container-Bedingungen

Das untenstehende Beispiel definiert eine @container-Regel, die mehrere Container-Bedingungen umfasst, und zeigt die Eigenschaften der zugehörigen CSSContainerRule.

Beachten Sie, dass wir den HTML-, Protokollierungs- und Feature-Check-Code ausgeblendet haben, da sie im vorherigen Beispiel identisch sind.

<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 @container-Deklaration hier definiert zwei Container-Bedingungen; sie wird einen Container matchen, wenn eine der Bedingungen zutrifft.

<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 <= 600px), (aspect-ratio > 1/1) {
    .card {
      font-size: 2em;
      background-color: lightblue;
    }
  }
</style>

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

if (typeof CSSContainerRule === "undefined") {
  // Browser doesn't support CSSContainerRule (at all)
  log("CSSContainerRule is not supported in this browser.");
} else if (!containerRule) {
  // Browser doesn't support multiple container conditions
  log(
    "No CSSContainerRule was created — @container with multiple conditions may not be parsed.",
  );
} else if ("conditions" in CSSContainerRule.prototype) {
  log("CSSContainerRule.conditions is supported.");
  log("CSSContainerRule.conditions:");
  containerRule.conditions.forEach((item) => {
    const jsonString = JSON.stringify(item);
    log(`  ${jsonString}`);
  });
  log(`CSSContainerRule.conditionText: "${containerRule.conditionText}"`);
} else {
  // @container exists but predates the multi-condition specification
  log("CSSContainerRule.conditions not supported");
  log(`CSSContainerRule.containerName: "${containerRule.containerName}"`);
  log(`CSSContainerRule.containerQuery: "${containerRule.containerQuery}"`);
  log(`CSSContainerRule.conditionText: "${containerRule.conditionText}"`);
}

Ergebnisse

Das Beispiel-Ergebnis wird unten gezeigt. Browser, die die conditions-Eigenschaft unterstützen, zeigen beide Bedingungen an. Diejenigen, die es nicht tun, werden eine Notiz protokollieren, die darauf hinweist, dass mehrere Bedingungen nicht geparst werden können.

Spezifikationen

Browser-Kompatibilität

Siehe auch

• CSS container-name, container-type, und container Kurzschreibweise
• CSS-Containment-Modul
• Container-Abfragen
• Verwendung von Containergröße und Abfragestilen