CSSContainerRule: containerName-Eigenschaft

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

Das untenstehende Beispiel definiert eine benannte @container-Regel und zeigt die Eigenschaften der zugehörigen CSSContainerRule. Das CSS ähnelt stark dem Beispiel für @container in Erstellen benannter Container-Kontexte.

<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, 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 untenstehende Code erhält das HTMLStyleElement, das mit dem Beispiel durch seine id verbunden ist, und verwendet dann seine sheet-Eigenschaft, um das StyleSheet zu erhalten. Vom StyleSheet bekommen wir die Menge der dem Sheet hinzugefügten cssRules. Da wir das @container als dritte Regel oben hinzugefügt haben, können wir auf die zugehörige CSSContainerRule zugreifen, indem wir den dritten Eintrag (Index "2") in den cssRules verwenden. 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 Log-Abschnitt listet den Containernamen-String auf. Der Titel im Kartenabschnitt sollte sich verdoppeln, wenn die Breite der Seite 700px überschreitet.

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