CSSContainerRule: conditions-Eigenschaft

Wert

Ein Array von Objekten, bei dem jedes Objekt die folgende Form hat:

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

Entweder name oder query kann ein leerer String sein, jedoch nicht beide.

Beschreibung

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

Jedes Objekt repräsentiert eine Container-Bedingung als eine name-String-Eigenschaft und eine query-String-Eigenschaft, von denen eine, falls nicht definiert, der leere String sein kann. Der name repräsentiert den Namen eines Containers, und der query-String repräsentiert die Menge an Feature-Tests, die wahr sein müssen, damit die bestimmte Container-Bedingung übereinstimmt.

Zum Beispiel, gegeben den folgenden @container:

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

Die conditions wäre ein Array wie dieses:

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

Beispiele

Siehe auch Beispiele in CSSContainerRule.

Grundlegende Verwendung

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

Beachten Sie, dass wir den Logging-Code ausgeblendet haben, da er 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

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

Das CSS für das Containerelement gibt den Typ des Containers an und kann auch einen Namen festlegen. Die Karte hat eine standardmäßige Schriftgröße, die überschrieben wird, wenn sie sich in einem sidebar @container befindet, dessen Breite größer oder gleich 700px ist, oder wenn sie sich in einem Container mit dem Namen other-name befindet. Beachten Sie, dass diese Bedingung konstruiert wurde, um zu zeigen, wie mehrere Bedingungen dargestellt werden (other-name macht 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 untenstehende Code erhält das HTMLStyleElement, das dem Beispiel über seine id zugeordnet ist, und verwendet dann dessen sheet-Eigenschaft, um das StyleSheet zu erhalten. Von dem StyleSheet erhalten wir die Menge der dem Blatt hinzugefügten cssRules. Da wir das @container als die dritte Regel oben hinzugefügt haben, können wir die zugehörige CSSContainerRule mit dem dritten Eintrag (Index "2") in den cssRules erreichen.

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

Wir verwenden dann die 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.");
}

Ergebnisse

Das Beispielergebnis wird unten gezeigt.

Spezifikationen

Browser-Kompatibilität

Siehe auch

• CSS-container-Kurzschreibweise
• CSS-Einschlussmodul
• Container-Abfragen
• Verwendung von Container-Größen- und Stilabfragen