CSSContainerRule: conditions-Eigenschaft

Wert

Ein Array von Objekten, wobei jedes Objekt folgende Form hat:

({ name: "<container-name>", query: "<container-query>" });

Entweder name oder query darf eine leere Zeichenfolge sein, aber nicht beide.

Beschreibung

Die conditions-Eigenschaft stellt eine zugehörige CSS-@container-At-Regel als Array von Objekten dar.

Jedes Objekt stellt eine Container-Bedingung mit den Zeichenfolgen-Eigenschaften name und query dar. Beide können eine leere Zeichenfolge sein, wenn sie nicht definiert sind. name bezeichnet den Namen eines Containers, und die Zeichenfolge query bezeichnet die Feature-Tests, die erfüllt sein müssen, damit die jeweilige Container-Bedingung zutrifft.

Betrachten Sie beispielsweise die folgende @container-At-Regel:

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

conditions wäre dann ein Array wie dieses:

[
  { name: "sidebar", query: "(width >= 700px)" },
  { name: "", query: "(height >= 400px)" },
];

Beispiele

Siehe auch die Beispiele zu CSSContainerRule.

Grundlegende Verwendung

Das Beispiel zeigt, wie mehrere Container-Bedingungen in der conditions-Eigenschaft dargestellt werden.

Der Code für die Protokollausgabe ist ausgeblendet, da er hier nicht relevant 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;
}

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 des Containers fest und kann auch einen Namen angeben. Die Karte hat eine Standardschriftgröße, die überschrieben wird, wenn sie sich in einem sidebar-@container mit einer Breite von mindestens 700px oder in einem Container namens other-name befindet. Diese Bedingung dient lediglich dazu, die Darstellung mehrerer Bedingungen zu veranschaulichen (other-name bewirkt hier tatsächlich nichts).

<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 ruft das dem Beispiel zugeordnete HTMLStyleElement anhand seiner id ab und verwendet dann dessen sheet-Eigenschaft, um das CSSStyleSheet abzurufen. Aus dem CSSStyleSheet rufen wir die darin enthaltenen cssRules ab. Da wir die @container-At-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 den Wert der conditions-Eigenschaft zu protokollieren.

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

Ergebnis

Die Ausgabe des Beispiels ist unten zu sehen.

Spezifikationen

Browser-Kompatibilität

Siehe auch

• CSS-Shorthand-Eigenschaft container
• CSS-Modul für Containment
• Container Queries
• Container-Größen- und Style-Queries verwenden