CSSContainerRule

Instanz-Eigenschaften

Erbt Eigenschaften von seinen Vorfahren CSSConditionRule, CSSGroupingRule und CSSRule.

CSSContainerRule.containerName Schreibgeschützt

Gibt eine Zeichenkette zurück, die den Namen eines @container repräsentiert, oder eine leere Zeichenkette.

CSSContainerRule.containerQuery Schreibgeschützt

Gibt eine Zeichenkette zurück, die die Menge der Merkmale oder "Containerbedingungen" repräsentiert, die ausgewertet werden, um zu bestimmen, ob die Stile im zugehörigen @container angewendet werden.

Instanz-Methoden

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

Beispiele

Unbenannte Container-Regel

Das untenstehende Beispiel definiert eine unbenannte @container Regel und zeigt die Eigenschaften der zugehörigen CSSContainerRule. Das CSS ist dasselbe wie im @container Beispiel Festlegen von Stilen basierend auf der Größe eines Containers.

Der erste Teil des Codes erstellt einfach eine Liste, um die Container-Regel-Eigenschaften zu protokollieren, 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>), die sich innerhalb eines post befindet.

<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 in dem 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 holt das HTMLStyleElement, das dem Beispiel zugeordnet ist, mittels seiner ID und nutzt dann dessen sheet-Eigenschaft, um das StyleSheet zu erhalten. Aus dem StyleSheet erhalten wir die Menge der cssRules, die zum Sheet hinzugefügt wurden. Da wir das @container als zweite Regel hinzugefügt haben, können wir die zugehörige CSSContainerRule mit dem zweiten Eintrag, 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}"`);

Das Beispiel-Ausgabe wird unten gezeigt. Der Protokollierungsabschnitt listet den containerName auf, der eine leere Zeichenkette ist, da kein Name definiert wurde. Die containerQuery und conditionText-Zeichenketten werden ebenfalls protokolliert und haben denselben Wert, weil kein Name definiert ist. Die Karte sollte die Hintergrundfarbe ändern, während die Breite der Seite durch 650px übergeht.

Benannte Container-Regel

Das untenstehende Beispiel definiert eine benannte @container Regel und zeigt die Eigenschaften der zugehörigen CSSContainerRule. Das CSS ist dem in dem @container Beispiel Erstellen von benannten Container-Kontexten 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>), die sich innerhalb eines post befindet (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 Abrufen des Sheets 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 verwenden.

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}"`);

Das Beispiel-Ausgabe wird unten gezeigt. Der Protokollierungsabschnitt listet die containerName und containerQuery Zeichenketten auf. Die conditionText wird ebenfalls protokolliert und zeigt die Kombination dieser beiden Zeichenketten. Der Titel im Kartenabschnitt sollte sich verdoppeln, wenn die Breite der Seite über 700px geht.

Spezifikationen

Browser-Kompatibilität

Siehe auch

• CSS container-name, container-type, und container Kurzform-Eigenschaften
• CSS-Eindämmungsmodul
• Container-Abfragen
• Verwendung von Container-Größen- und Stil-Abfragen