CSSContainerRule: containerName-Eigenschaft

Wert

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

Beispiele

Das folgende Beispiel definiert eine benannte @container-Regel und zeigt die Eigenschaften der zugehörigen CSSContainerRule. Das CSS ist dem im @container-Beispiel Erstellung benannter Container-Kontexte 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 in einem post enthalten ist.

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

Das CSS für das Containerelement legt den Typ des Containers fest und kann auch einen Namen festlegen. Die card hat eine Standard-Schriftgröße, die für das @container mit dem Namen sidebar überschrieben wird, wenn 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 folgende Code ruft das HTMLStyleElement ab, das mit dem Beispiel über seine id verbunden ist, und verwendet dann seine sheet-Eigenschaft, um das StyleSheet zu bekommen. Aus dem StyleSheet erhalten wir die Menge der cssRules, die dem Stylesheet hinzugefügt wurden. Da wir das @container als dritte Regel oben hinzugefügt haben, können wir die zugehörige CSSContainerRule über den dritten Eintrag (Index "2") in den cssRules zugreifen. Zum Schluss protokollieren wir den Container-Namen und die Abfrageeigenschaften (der Code, der das Protokollieren durchführt, wird nicht angezeigt).

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

Die Beispielausgabe wird unten gezeigt. Der Protokollabschnitt listet den Containernamen als String auf. Der Titel im card-Abschnitt sollte sich verdoppeln, wenn die Seitenbreite mehr als 700px beträgt.

Spezifikationen

Browser-Kompatibilität

Siehe auch

• CSS container Shorthand-Eigenschaft
• CSS Containment-Modul
• Container-Abfragen
• Verwendung von Container-Größen- und Stilabfragen