CSSContainerRule: containerName-Eigenschaft

Wert

Ein String, der den container-name der mit dieser CSSContainerRule assoziierten @container-Regel enthält. Falls das @container nicht benannt ist, gibt die Funktion den leeren String ("") zurück.

Beispiele

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

<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.

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

Das CSS für das Containerelement spezifiziert den Typ des Containers und kann auch einen Namen angeben. Die Karte hat eine Standard-Schriftgröße, die für das @container mit dem Namen sidebar überschrieben wird, falls die Breite 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 untenstehende Code erhält das HTMLStyleElement, das mit dem Beispiel über seine id assoziiert ist, und verwendet dann dessen sheet-Eigenschaft, um das StyleSheet zu bekommen. Vom StyleSheet erhalten wir die Menge der cssRules, die zum Stilblatt hinzugefügt wurden. Da wir das @container als dritte Regel oben hinzugefügt haben, können wir die zugehörige CSSContainerRule mit dem dritten Eintrag (Index "2") in den cssRules abfragen. Zuletzt loggen wir den Containernamen und die Abfrageeigenschaften (der Code, der das Logging durchführt, wird nicht gezeigt).

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

Das Beispielergebnis wird unten gezeigt. Der Protokollabschnitt listet den Container-Namen-String auf. Der Titel im Kartenabschnitt sollte sich verdoppeln, wenn die Breite der Seite über 700px geht.

Spezifikationen

Browser-Kompatibilität

Siehe auch

• CSS container Kurzschreibweise
• CSS Containment Modul
• Containerabfragen
• Verwendung von Containergrößen- und Stilabfragen