CSSContainerRule

Erbt Eigenschaften von seinen Vorfahren CSSConditionRule, CSSGroupingRule, und CSSRule.

CSSContainerRule.containerName Schreibgeschützt

Gibt einen String zurück, der den Namen eines @container darstellt, oder einen leeren String.

CSSContainerRule.containerQuery Schreibgeschützt

Gibt einen String zurück, der die Menge der Merkmale oder "container conditions" darstellt, die ausgewertet werden, um festzustellen, ob die Stile im zugehörigen @container angewendet werden.

Keine spezifischen Methoden; erbt Methoden von seinen Vorfahren CSSConditionRule, CSSGroupingRule, und CSSRule.

Das folgende Beispiel definiert eine unbenannte @container-Regel und zeigt die Eigenschaften der zugehörigen CSSContainerRule. Das CSS ist dasselbe wie im @container-Beispiel Stile basierend auf der Größe eines Containers setzen.

Der erste Teil des Codes erstellt einfach eine Liste zur Protokollierung der Containereigenschaften, zusammen mit einer JavaScript-log()-Methode, um das Hinzufügen der Eigenschaften zu vereinfachen.

<div id="log">
  <h2>Log</h2>
  <ul></ul>
  <hr />
</div>

// Store reference to log list
const logList = document.querySelector("#log ul");
// Function to log data from underlying source
function log(result) {
  const listItem = document.createElement("li");
  listItem.textContent = result;
  logList.appendChild(listItem);
}

Dann definieren wir das HTML für eine card (<div>) innerhalb eines post.

<div class="post">
  <div class="card">
    <h2>Card title</h2>
    <p>Card content</p>
  </div>
</div>

Das CSS für das Beispiel wird unten gezeigt. Wie im entsprechenden @container-Beispiel beschrieben, gibt das CSS für das Containerelement den Typ des Containers an. Die @container-Regel legt dann eine neue Breite, Schriftgröße und Hintergrundfarbe für die Karte fest, wenn die Breite weniger als 650px beträgt.

<style id="example-styles">
  /* A container context based on inline size */
  .post {
    container-type: inline-size;
  }

  /* Apply styles if the container is narrower than 650px */
  @container (width < 650px) {
    .card {
      width: 50%;
      background-color: gray;
      font-size: 1em;
    }
  }
</style>

Der unten stehende Code erhält das mit dem Beispiel verknüpfte HTMLStyleElement über seine ID und verwendet dann seine sheet-Eigenschaft, um das StyleSheet zu erhalten. Aus dem StyleSheet erhalten wir die Menge der cssRules, die dem Blatt hinzugefügt wurden. Da wir das @container als zweite Regel hinzugefügt haben, können wir die zugehörige CSSContainerRule mit dem zweiten Eintrag, mit dem Index "1", in den cssRules zugreifen. Zuletzt protokollieren wir die Eigenschaften containerName, containerQuery und conditionText (geerbt).

const exampleStylesheet = document.getElementById("example-styles").sheet;
const exampleRules = exampleStylesheet.cssRules;
const containerRule = exampleRules[1]; // a CSSContainerRule representing the container rule.
log(`CSSContainerRule.containerName: "${containerRule.containerName}"`);
log(`CSSContainerRule.containerQuery: "${containerRule.containerQuery}"`);
log(`CSSContainerRule.conditionText: "${containerRule.conditionText}"`);

Die Beispielausgabe wird unten gezeigt. Der Protokollierungsabschnitt listet den containerName auf, der ein leerer String ist, da kein Name definiert wurde. Die containerQuery- und conditionText-Strings werden ebenfalls protokolliert und haben denselben Wert, da kein Name definiert ist. Die Karte sollte den Hintergrund ändern, während die Breite der Seite 650px überschreitet.

Das folgende Beispiel definiert eine benannte @container-Regel und zeigt die Eigenschaften der zugehörigen CSSContainerRule. Das CSS ist dem im @container-Beispiel Erstellen benannter Containerkontexte sehr ähnlich.

<div id="log">
  <h2>Log</h2>
  <ul></ul>
  <hr />
</div>

// Store reference to log list
const logList = document.querySelector("#log ul");
// Function to log data from underlying source
function log(result) {
  const listItem = document.createElement("li");
  listItem.textContent = result;
  logList.appendChild(listItem);
}

Zuerst definieren wir das HTML für eine card (<div>) innerhalb eines post (das Beispiel zeigt den Protokollierungscode nicht, da dieser derselbe wie im vorherigen Beispiel ist).

<div class="post">
  <div class="card">
    <h2>Card title</h2>
    <p>Card content</p>
  </div>
</div>

Wie in @container beschrieben, gibt das CSS für das Containerelement den Typ des Containers an und kann auch einen Namen für den Container angeben. Die Karte hat eine Standard-Schriftgröße, die für das @container mit dem Namen sidebar überschrieben wird, wenn die Mindestbreite größer als 700px ist.

<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) {
    .card {
      font-size: 2em;
    }
  }
</style>

Der Code zum Erhalten des Stilblatts und der Regeln ist fast identisch mit dem vorherigen Beispiel. Der einzige Unterschied besteht darin, dass wir in diesem Beispiel drei CSS-Regeln haben, sodass wir, um die zugehörige CSSContainerRule zu erhalten, den dritten Eintrag in den cssRules abrufen.

const exampleStylesheet = document.getElementById("example-styles").sheet;
const exampleRules = exampleStylesheet.cssRules;
const containerRule = exampleRules[2]; // a CSSContainerRule representing the container rule.
log(`CSSContainerRule.containerName: "${containerRule.containerName}"`);
log(`CSSContainerRule.containerQuery: "${containerRule.containerQuery}"`);
log(`CSSContainerRule.conditionText: "${containerRule.conditionText}"`);

Die Beispielausgabe wird unten gezeigt. Der Protokollierungsabschnitt listet die containerName- und containerQuery-Strings auf. Der conditionText wird ebenfalls protokolliert und zeigt die Kombination dieser beiden Strings. Der Titel im Kartenabschnitt sollte doppelt so groß werden, wenn die Breite der Seite über 700px geht.

• CSS container-name, container-type, und container Kurzschreibweise-Eigenschaften
• CSS-Einschließungsmodul
• Container-Abfragen
• Verwendung von Containergrößen- und Stilabfragen