CSSContainerRule

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

CSSContainerRule.containerName Schreibgeschützt

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

CSSContainerRule.containerQuery Schreibgeschützt

Gibt einen String zurück, der den Satz von Merkmalen oder "Containerbedingungen" darstellt, die ausgewertet werden, um zu bestimmen, 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 an. Die CSS ist dieselbe wie im @container Beispiel Stile einstellen basierend auf der Größe eines Containers.

Der erste Teil des Codes erstellt einfach eine Liste für die Protokollierung der Container-Regel-Eigenschaften, zusammen mit einer JavaScript-Methode log(), 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. Das @container wendet dann eine neue Breite, Schriftgröße und Hintergrundfarbe auf die Karte an, 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 untenstehende Code erhält das mit dem Beispiel verbundene HTMLStyleElement über seine ID und verwendet dann dessen sheet-Eigenschaft, um das StyleSheet zu erhalten. Aus dem StyleSheet erhalten wir die Anzahl der cssRules, die dem Sheet hinzugefügt wurden. Da wir das @container als die zweite Regel hinzugefügt haben, können wir auf die zugehörige CSSContainerRule über den zweiten Eintrag, mit Index "1", in den cssRules zugreifen. Zuletzt protokollieren wir die containerName, containerQuery und conditionText (geerbt) Eigenschaften.

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 Protokollabschnitt listet den containerName, 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, wenn die Breite der Seite durch 650px wechselt.

Das folgende Beispiel definiert eine benannte @container Regel und zeigt die Eigenschaften der zugehörigen CSSContainerRule an. Die CSS ist sehr ähnlich wie im @container Beispiel Erstellen von benannten Container-Kontexten.

<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 ist wie im vorherigen Beispiel).

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

Wie in @container beschrieben, spezifiziert das CSS für das Containerelement den Typ des Containers 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 (min-width: 700px) {
    .card {
      font-size: 2em;
    }
  }
</style>

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

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 Protokollabschnitt listet die containerName und containerQuery Strings auf. Der conditionText wird ebenfalls protokolliert und zeigt die Kombination dieser beiden Strings. Der Titel in dem Kartenabschnitt sollte sich verdoppeln, wenn die Breite der Seite über 700px geht.

• CSS container-name, container-type, und container Kurzschreibereigenschaften
• CSS Containment Modul
• Container-Abfragen
• Verwendung von Container-Größen- und Stil-Abfragen