CSSContainerRule: Bedingungen-Eigenschaft

Die schreibgeschützte conditions-Eigenschaft der CSSContainerRule-Schnittstelle repräsentiert eine zugehörige CSS @container-at-Regel als ein Array von Objekten, wobei jedes Objekt eine einzelne Containerbedingung darstellt.

Wert

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

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

Entweder name oder query kann der leere String sein, aber nicht beide.

Beschreibung

Die conditions-Eigenschaft repräsentiert eine zugehörige CSS @container-at-Regel als ein Array von Objekten.

Jedes Objekt repräsentiert eine Containerbedingung als eine name-String-Eigenschaft und eine query-String-Eigenschaft, die jeweils der leere String sein kann, wenn nicht definiert. Der name repräsentiert den Namen eines Containers, und der query-String repräsentiert die Menge der Feature-Tests, die wahr sein müssen, damit die spezifische Containerbedingung übereinstimmt.

Zum Beispiel, gegeben die folgende @container:

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

Die conditions wären 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 Containerbedingungen in der conditions-Eigenschaft dargestellt werden.

Beachten Sie, dass wir den Logging-Code ausgeblendet haben, da dieser 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 innerhalb eines 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 spezifiziert den Typ des Containers und kann auch einen Namen angeben. Die Karte hat eine Standard-Schriftgröße, die überschrieben wird, wenn sie sich innerhalb eines 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 ist, um zu demonstrieren, wie mehrere Bedingungen dargestellt werden (other-name tut eigentlich 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 mit dem Beispiel durch seine id assoziiert ist, und verwendet dann dessen sheet-Eigenschaft, um das StyleSheet zu erhalten. Aus dem StyleSheet bekommen wir die Menge der cssRules, die dem Blatt hinzugefügt wurden. Da wir die @container als dritte Regel oben hinzugefügt haben, können wir auf die zugehörige CSSContainerRule zugreifen, indem wir den dritten Eintrag (Index "2") in den cssRules verwenden.

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

Die Beispieldarstellung wird unten gezeigt.

Spezifikationen

Browser-Kompatibilität

Siehe auch

• CSS container Shorthand-Eigenschaft
• CSS Containment-Modul
• Container-Abfragen
• Verwendung von Container-Größen- und Stilabfragen