CSSContainerRule: conditions-Eigenschaft

Wert

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

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

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

Beschreibung

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

Jedes Objekt stellt eine Containerbedingung als eine name-String-Eigenschaft und eine query-String-Eigenschaft dar, von denen eine leer sein kann, wenn sie nicht definiert ist. Der name repräsentiert den Namen eines Containers, und der query-String repräsentiert die Menge an Funktionstests, die wahr sein müssen, damit die spezielle Containerbedingung übereinstimmt.

Zum Beispiel, gegeben den folgenden @container:

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

Die conditions würden ein Array wie dieses sein:

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

Beispiele

Siehe auch Beispiele in CSSContainerRule.

Grundlegende Nutzung

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

Beachten Sie, dass wir den Protokollierungscode versteckt 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 Container-Element gibt den Typ des Containers an und kann auch einen Namen spezifizieren. Die Karte hat eine standardmäßige Schriftgröße, die überschrieben wird, wenn sie innerhalb eines sidebar-@container ist und 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 erfunden 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 unten stehende Code erhält das HTMLStyleElement, das mit dem Beispiel verbunden ist, unter Verwendung seiner id, und verwendet dann dessen sheet-Eigenschaft, um das StyleSheet zu erhalten. Von dem StyleSheet erhalten wir die Menge der cssRules, die zum Stylesheet hinzugefügt wurden. Da wir das @container als dritte Regel hinzugefügt haben, können wir auf die zugehörige CSSContainerRule durch den dritten Eintrag (Index "2") in den cssRules zugreifen.

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 Beispiel-Ergebnis wird unten angezeigt.

Spezifikationen

Browser-Kompatibilität

Siehe auch

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