CSSContainerRule

Erbt Eigenschaften von seinen Vorfahren CSSConditionRule, CSSGroupingRule und CSSRule.

CSSContainerRule.containerName Nur lesbar

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

CSSContainerRule.containerQuery Nur lesbar

Gibt einen String zurück, der die Menge der Funktionen 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. Der CSS-Code ist derselbe wie im @container-Beispiel Festlegen von Stilen basierend auf der Größe eines Containers.

Der erste Teil des Codes erstellt einfach eine Liste zum Protokollieren 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>), die in einem post enthalten ist.

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

Der CSS-Code für das Beispiel wird unten angezeigt. Wie im entsprechenden @container-Beispiel beschrieben, legt das CSS für das Containerelement den Typ des Containers fest. Das @container wendet dann eine neue Breite, Schriftgröße und Hintergrundfarbe auf die Karte an, wenn die Breite kleiner als 650px ist.

<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 ruft das mit dem Beispiel verknüpfte HTMLStyleElement anhand seiner ID ab und verwendet dann seine sheet-Eigenschaft, um das StyleSheet zu erhalten. Aus dem StyleSheet erhalten wir die Menge der cssRules, die dem Stylesheet hinzugefügt wurden. Da wir das @container als zweite Regel hinzugefügt haben, können wir auf die zugehörige CSSContainerRule mit dem zweiten Eintrag, Index "1", in den cssRules zugreifen. Schließlich 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}"`);

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

Das folgende Beispiel definiert eine benannte @container-Regel und zeigt die Eigenschaften der zugehörigen CSSContainerRule an. Der CSS-Code 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 ist wie im vorherigen Beispiel).

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

Wie im @container beschrieben, gibt das CSS für das Containerelement den Typ des Containers an und kann auch einen Namen für den Container festlegen. Die Karte hat eine Standardschriftgröß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 Stylesheets 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 für die zugehörige CSSContainerRule 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}"`);

Das Beispielergebnis wird unten angezeigt. Der Protokollabschnitt listet die Strings containerName und containerQuery 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 700px überschreitet.

• CSS container-name, container-type und container Kurzschreibweise
• CSS Containment-Modul
• Container-Abfragen
• Verwendung von Containergröße und Stilabfragen