CSSContainerRule

Instanzeigenschaften

Erbt Eigenschaften von den übergeordneten Schnittstellen CSSConditionRule, CSSGroupingRule und CSSRule.

CSSContainerRule.conditions Schreibgeschützt

Gibt ein Array von Objekten zurück, die jeweils eine Container-Bedingung in einer @container-Regel angeben. Die Objekte haben eine String-Eigenschaft name und eine String-Eigenschaft query. Beide können ein leerer String sein, wenn sie nicht definiert sind. name bezeichnet den Namen eines Containers und query die Menge der Feature-Tests, die erfüllt sein müssen, damit die jeweilige Bedingung zutrifft.

CSSContainerRule.containerName Schreibgeschützt

Gibt einen String zurück, der den Namen der Container-Bedingung einer @container-Regel angibt, wenn nur eine Bedingung vorhanden ist. Wenn mehrere Container-Bedingungen vorhanden sind oder die einzige Bedingung keinen Namen angibt, ist der Wert ein leerer String.

CSSContainerRule.containerQuery Schreibgeschützt

Gibt einen String zurück, der die Container-Abfrage für die Container-Bedingung einer @container-Regel angibt, wenn nur eine Bedingung vorhanden ist. Er repräsentiert eine Menge von Feature-Tests, die alle erfüllt sein müssen, damit die Bedingung zutrifft. Wenn mehrere Container-Bedingungen vorhanden sind oder die einzige Bedingung keine Abfrage angibt, ist der Wert ein leerer String.

Instanzmethoden

Keine eigenen Methoden; erbt Methoden von den übergeordneten Schnittstellen 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“. Der Name bezeichnet den Container, für den die Bedingung gilt, und die Abfrage legt einen oder mehrere logisch verknüpfte Feature-Tests für die Eigenschaften eines Containers fest. Wenn mindestens eine der Container-Bedingungen auf einen Container zutrifft, werden die angegebenen Stile angewendet.

Ein konstruiertes Beispiel mit drei Bedingungen ist unten dargestellt. Die Regel trifft auf einen Container namens main-content zu, wenn seine Breite zwischen 600px und 800px liegt, auf jeden Container mit einer Höhe von mehr als 800px oder auf jeden Container namens other-content.

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

In Browsern, die dies unterstützen, repräsentiert die Eigenschaft CSSContainerRule.conditions eine @container-Regel als Array von Objekten, die jeweils eine einzelne Container-Bedingung definieren. Die Objekte haben die Eigenschaften name und query, die jeweils ein leerer String ("") sein können. Die Eigenschaft conditions für das obige @container-Beispiel sähe so aus:

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

Die Eigenschaften containerName und containerQuery wurden eingeführt, bevor Container-Regeln mit mehreren Container-Bedingungen unterstützt wurden. Bei einer Container-Regel mit einer einzelnen Container-Bedingung enthalten sie den Namen und die Abfrage dieser Bedingung (entsprechend den Eigenschaften name und query des Objekts im Array conditions). Bei einer Container-Regel mit mehreren Bedingungen sind beide auf einen leeren String gesetzt.

Beachten Sie, dass Browser ohne Unterstützung für die Eigenschaft conditions nur Container-Regeln mit einer einzelnen Container-Bedingung zulassen. Eine @container-Regel mit mehreren Container-Bedingungen wird nicht geparst, und es wird kein entsprechendes CSSContainerRule-Objekt erstellt.

Den Text der gesamten Bedingung können Sie auch über CSSConditionRule.conditionText abrufen.

Beispiele

Unterstützung von Features prüfen

Die Prüfung auf unterstützte Features kann aufwendig sein, da Sie Fälle berücksichtigen müssen, in denen CSSContainerRule oder CSSContainerRule.conditions nicht unterstützt werden. Hinzu kommt der Sonderfall, dass conditions nicht unterstützt wird, in der CSS-Regel aber mehrere Container-Bedingungen angegeben sind.

Der folgende Code zeigt, wie Sie dabei vorgehen können. Er setzt voraus, dass Sie bereits containerRule erhalten haben: eine CSSContainerRule-Instanz, die einer im CSS der Seite definierten @container-Regel entspricht. Das nächste Beispiel zeigt, wie Sie containerRule abrufen können.

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, sofern vorhanden, die Informationen aus CSSContainerRule.conditions gegenüber containerName und containerQuery bevorzugen.

Container-Bedingung ohne Namen

Das folgende Beispiel definiert eine @container-Regel mit einer einzelnen Container-Bedingung ohne Namen und zeigt die Eigenschaften der zugehörigen CSSContainerRule an. Das CSS entspricht dem @container-Beispiel Stile anhand der Größe eines Containers festlegen.

Der Code zur Protokollierung der Ergebnisse ist hier nicht besonders relevant und wurde daher 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

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

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

CSS

Das CSS für das Beispiel ist unten dargestellt. Zuerst legt es container-type für das Container-Element (post) fest. Anschließend weist die @container-Regel der Karte eine neue width, background-color und font-size zu, wenn die Breite weniger als 650px beträgt.

<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 folgende Code ruft über die id das zum Beispiel gehörende HTMLStyleElement ab und verwendet dann dessen Eigenschaft sheet, um das CSSStyleSheet zu erhalten. Aus dem CSSStyleSheet erhalten wir die Menge der dem Stylesheet hinzugefügten cssRules. Da wir @container oben als zweite Regel hinzugefügt haben, können wir über den zweiten Eintrag mit dem Index „1“ in cssRules auf die zugehörige CSSContainerRule 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 den Code zur Prüfung der Feature-Unterstützung aus dem vorherigen Beispiel, um die gewünschten Informationen zu ermitteln und zu protokollieren.

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

Die Ausgabe des Beispiels ist unten dargestellt. Sie führt die Bedingung entweder über die Eigenschaft conditions auf, wenn diese unterstützt wird, oder andernfalls über containerName/containerQuery.

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

Benannte Container-Bedingung

Das folgende Beispiel definiert eine @container-Regel mit einem Namen und einer Abfrage und zeigt die Eigenschaften der zugehörigen CSSContainerRule an.

Das CSS ähnelt stark dem @container-Beispiel Benannte Container-Kontexte erstellen. Das HTML sowie den Code zur Protokollierung und zur Prüfung der Feature-Unterstützung haben wir ausgeblendet, da sie dem vorherigen Beispiel entsprechen.

<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 werden sowohl ein Container-Name, sidebar, als auch der Container-Typ festgelegt. Die Karte hat eine Standardschriftgröße. Sie wird überschrieben, wenn sich die Karte innerhalb eines @container namens sidebar befindet und 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>

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

Die Ausgabe des Beispiels ist unten dargestellt. Sie führt die Bedingung entweder über die Eigenschaft conditions auf, wenn diese unterstützt wird, oder andernfalls über containerName/containerQuery. Auch conditionText wird protokolliert und zeigt die Kombination dieser beiden Strings.

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

Mehrere Container-Bedingungen

Das folgende Beispiel definiert eine @container-Regel mit mehreren Container-Bedingungen und zeigt die Eigenschaften der zugehörigen CSSContainerRule an.

Das HTML sowie den Code zur Protokollierung und zur Prüfung der Feature-Unterstützung haben wir ausgeblendet, da sie dem vorherigen Beispiel entsprechen.

<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 definiert hier zwei Container-Bedingungen. Sie trifft auf einen Container zu, wenn eine der beiden Bedingungen erfüllt ist.

<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

Die Ausgabe des Beispiels ist unten dargestellt. Browser, die die Eigenschaft conditions unterstützen, zeigen beide Bedingungen an. Browser ohne diese Unterstützung protokollieren einen Hinweis, dass mehrere Bedingungen nicht geparst werden können.

Spezifikationen

Browser-Kompatibilität

Siehe auch

• CSS-Eigenschaften container-name, container-type und die Kurzschreibweise container
• CSS-Modul für Containment
• Container-Abfragen
• Container-Größen- und Stilabfragen verwenden