CSSContainerRule: Bedingungen-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 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