Verwendung von Containergrößen- und Stilabfragen

Container-Größenabfragen werden durch eine Größenbedingung gefiltert. Die zugehörigen Stile werden auf enthaltene Elemente angewendet, wenn das Containerelement als Container deklariert wurde und die Containerbedingung für dieses Element zutrifft. Der Größencontainer eines Elements ist der nächstgelegene Vorfahre mit Containment.

Elemente werden als Größenabfrage-Container deklariert, indem ihre container-type-Eigenschaft (oder die container-Kurzschrift) auf size oder inline-size gesetzt wird.

@container (orientation: landscape) {
  /* styles applied to descendants of this size container */
}

.sizeContainer {
  container-type: size;
}

Die Deklaration von Größenabfrage-Containern fügt Containment hinzu. Dies ist eine Leistungsnotwendigkeit — die Größe jedes Elements im DOM ständig abzufragen, wäre schlecht für die Leistung und Benutzererfahrung. Außerdem könnte, wenn ein Nachkommenstil die Größe des Containerelements verändert, eine Endlosschleife entstehen.

In einer Container-Größenabfrage enthält die <container-condition> eine oder mehrere <size-query>s. Jede Größenabfrage beinhaltet einen Größeneigenschaftsnamen, einen Vergleichsoperator und einen Wert. Die Größenmerkmale, die abgefragt werden können, sind auf width, height, inline-size, block-size, aspect-ratio und orientation beschränkt. Die boolesche Syntax und Logik zum Kombinieren von einem oder mehreren <size-query>s ist dieselbe wie bei @media-Größenabfragen.

form {
  container-type: inline-size;
}

@container (10em <= width <= 20em) {
  /* styles */
}

Die <container-condition> in diesem Beispiel enthält eine einzelne <size-query> — (10em <= width <= 20em). In diesem Fall sind alle <form>-Elemente potenzielle Treffer für jede unbenannte Container-Abfrage. Die innerhalb unserer Container-Abfrage deklarierten Stile gelten für die Nachkommen aller Formulare mit einer Breite zwischen 10em und 30em, einschließlich.

Eine <container-condition> kann einen optionalen, groß- und kleinschreibungssensitiven container-name enthalten. Ein Containername macht die Containerbedingung spezifischer — sie wird nur gegen Elemente ausgewertet, die diesen Namen im container-name-Eigenschaft haben.

Die container-name-Eigenschaft spezifiziert eine Liste von Abfrage-<container-name>-Werten, die in @container-Regeln verwendet werden können; dies sind groß- und kleinschreibungssensitive <ident>-Werte. Die Container-Namen ermöglichen das Targeting eines beliebigen Container-Vorfahren des Elements. Ohne einen Container-Namen stimmt die Abfrage nur mit dem nächsten Container-Vorfahren überein.

@container [ [ <container-name> ]? <container-query> ]# {
  /* <stylesheet> */
}

Nachdem Sie Namen zu Ihren @container-Regeln hinzugefügt haben, können Sie die container-name-Eigenschaft oder die container-Kurzschrift verwenden, um spezifische Containerelemente zu targetieren. Stile innerhalb der benannten @container-Regeln werden nur auf übereinstimmende Elemente innerhalb von Containern angewendet, die diese Namen haben und die Container-Abfragen erfüllen.

@container card (orientation: landscape) {
  /* styles */
}

.todo-panel > li {
  container-type: inline-size;
  container-name: card;
}

Im obigen Beispiel werden die Stile innerhalb des Container-Abfrageblocks auf die Nachkommen aller <li>-Elemente mit einer Breite angewendet, die größer ist als ihre Höhe. Beachten Sie, dass andere Elemente mit container-name: card, die mit der Größenabfrage übereinstimmen, diese Stile ebenfalls auf die Nachkommen ihrer Elemente anwenden.

@container wide (min-width: 20em) {
  /* styles applied to descendants of wide .sizeContainer */
}

@container narrow (max-width: 20em) {
  /* styles applied to descendants of narrow .sizeContainer */
}

.sizeContainer {
  container-type: size;
  container-name: wide narrow;
}

Im obigen Beispiel hat das Element zwei Container-Namen, wide und narrow. Die Nachkommen eines Elements mit class="sizeContainer" erhalten die Stile aus der wide oder narrow-Abfrage angewendet (oder beide, wenn ein Element genau 20em breit ist).

Der Standardwert container-type: normal verhindert, dass der Container ein Größencontainer ist, aber er kann immer noch ein Stilcontainer sein. Der Standardwert container-name: none gibt an, dass der Container keinen Namen hat, verhindert jedoch nicht, dass das Element mit unbenannten Abfragen übereinstimmt.

Mit Container-Abfragen sind wir nicht auf Größenabfragen beschränkt! Sie können auch die Stileigenschaften eines Containers abfragen.

Eine Container-Stilabfrage ist eine @container-Abfrage, die die berechneten Stile des Container-Elements auswertet, wie in einer oder mehreren style()-Funktionsnotationen definiert. Die boolesche Syntax und Logik zur Kombination von Stileigenschaften in eine Stilabfrage sind dieselben wie in CSS-Feature-Abfragen. Der einzige Unterschied ist der Funktionsname — style() innerhalb eines <style-feature> anstelle von supports() innerhalb eines <support-condition>:

@container style(<style-feature>),
    not style(<style-feature>),
    style(<style-feature>) and style(<style-feature>),
    style(<style-feature>) or style(<style-feature>) {
  /* <stylesheet> */
}

Der Parameter jeder style()-Funktion ist ein einzelnes <style-feature>. Gemäß der CSS-Containment-Spezifikation kann ein <style-feature> eine gültige CSS-Deklaration, eine CSS-Eigenschaft oder ein <custom-property-name> sein. Das einzige derzeit unterstützte Stileigenschaft ist die benutzerdefinierte Eigenschaft, mit oder ohne Wert. Siehe die Tabelle zur Browser-Kompatibilität.

Wenn das <style-feature> einen Wert enthält, wird die Stilabfrage zu true ausgewertet, wenn der berechnete Wert der benutzerdefinierten Eigenschaft (oder zukünftig die CSS-Deklaration), die als style()-Argument übergeben wird, für den abgefragten Container true ist. Andernfalls wird es zu false ausgewertet. Ein Stileigenschaft ohne Wert wird zu true ausgewertet, wenn der berechnete Wert vom Anfangswert für die gegebene Eigenschaft abweicht.

In der Zukunft werden wir Stilabfragen schreiben können wie:

@container style(color: green) and style(background-color: transparent),
    not style(background-color: red),
    style(--themeBackground),
    style(--themeColor: blue) or style(--themeColor: purple),
    (max-width: 100vw) and style(max-width: 600px) {
  /* <stylesheet> */
}

Die style()-Funktionsnotation wird verwendet, um Stilabfragen von Größenabfragen zu unterscheiden. Während noch nicht unterstützt, werden wir schließlich in der Lage sein, reguläre CSS-Deklarationen wie max-width: 100vw abzufragen. Das Abfragen von @container (max-width: 100vw) ist eine Größenabfrage; Containment mit container-type, oder die container-Kurzschrift, ist erforderlich. Diese Abfrage gibt true zurück, wenn der Container 100vw oder weniger ist. Das unterscheidet sich von der Abfrage @container style(max-width: 100vw), die eine Stilabfrage ist; wenn dies unterstützt wird, gibt diese Abfrage true zurück, wenn der Container einen max-width-Wert von 100vw hat.

Solange Stilabfragen für reguläre CSS-Deklarationen und -Eigenschaften noch nicht unterstützt werden, sind wir darauf beschränkt, nur benutzerdefinierte Eigenschaften als style()-Parameter einzuschließen, mit oder ohne Wert:

@container style(--themeBackground),
    style(--themeColor: blue) or style(--themeColor: purple) {
  /* <stylesheet> */
}

Einige zu beachtende Punkte die bereits erwähnt wurden, aber wichtig sind zu erinnern:

• Alle Elemente können Stilabfrage-Container sein; das Setzen eines container-type ist nicht erforderlich. Wenn Nachkommenstile die berechneten Stile eines Vorfahren nicht beeinflussen, ist Containment nicht notwendig.
• Eine <container-condition> kann sowohl Stil- als auch Größenmerkmale enthalten. Wenn Sie Größenmerkmale in Ihre Abfrage aufnehmen, stellen Sie sicher, dass Ihre Containerelemente einen container-type von size oder inline-size haben.
• Wenn Sie nicht möchten, dass ein Element jemals als Container betrachtet wird, geben Sie ihm einen container-name, der nicht verwendet wird. Das Setzen von container-name: none entfernt alle Abfragenamen, die einem Container zugeordnet sind; es verhindert nicht, dass das Element ein Stilcontainer ist.
• Zum Zeitpunkt dieses Schreibens (Februar 2024) funktionieren Container-Stilabfragen nur mit CSS-Benutzerdefiniertem Eigenschaftswerten in der style()-Abfrage.

Lassen Sie uns nun eintauchen und uns die verschiedenen <style-feature>-Typen ansehen.

Stilabfragen für benutzerdefinierte Eigenschaften ermöglichen es Ihnen, die benutzerdefinierten Eigenschaften, auch genannt "CSS-Variablen", eines Elternelements abzufragen. Sie sind innerhalb eines <style-query> enthalten, genauso wie Sie jede reguläre CSS-Eigenschaft innerhalb einer Feature-Abfrage einbeziehen würden: entweder mit oder ohne Wert.

Eigenständige benutzerdefinierte Eigenschaftsabfragen

Der <style-query>-Parameter der style()-Funktionsnotation kann nur einen CSS-Variablennamen enthalten; eine benutzerdefinierte Eigenschaft ohne Wert. Wenn kein Wert enthalten ist, gibt die Abfrage false zurück, wenn der Wert derselbe ist wie der Wert des initial-value-Descriptors innerhalb der @property-At-Regel, falls vorhanden. Die Stilabfrage wird true zurückgeben und alle Elemente übereinstimmen, die einen benutzerdefinierten Eigenschaftswert haben, der sich von initial-value unterscheidet, oder für alle Elemente, die eine benutzerdefinierte Eigenschaft eines beliebigen Wertes haben, wenn die benutzerdefinierte Eigenschaft ohne Registrierung deklariert wurde.

Nicht registrierte benutzerdefinierte Eigenschaften

Wenn CSS-Variablen über eine Zuweisung von CSS-Benutzerdefiniertem Eigenschaftswert eingeführt werden, geben wertlosen benutzerdefinierten Eigenschaftsabfragen immer true zurück.

:root {
  --theme-color: rebeccapurple;
}

@container style(--theme-color) {
  /* <stylesheet> */
}

In diesem Beispiel stimmt die Container-Abfrage mit dem Element überein, auf dem die --theme-color-Eigenschaft deklariert wurde, und alle ihre Nachkommen. Da die CSS-Variable --theme-color auf der :root deklariert wurde, wird die Stilabfrage style(--theme-color) für jedes Element innerhalb dieses DOM-Knotens true sein.

Registrierte Eigenschaften

Das Verhalten registrierter benutzerdefinierter Eigenschaften ist anders. Wenn sie explizit mit der @property-CSS-At-Regel oder über JavaScript mit CSS.registerProperty() definiert wurden, gibt die Stilabfrage style(--theme-color) nur für Elemente true zurück, wenn der berechnete Wert des Elements für --theme-color sich von dem initial-value unterscheidet, der in der ursprünglichen Definition dieser benutzerdefinierten Eigenschaft festgelegt wurde.

@property --theme-color {
  initial-value: rebeccapurple;
  inherited: true;
}

:root {
  --theme-color: rebeccapurple;
}

main {
  --theme-color: blue;
}

@container style(--theme-color) {
  /* <stylesheet> */
}

In diesem Beispiel stimmt das :root-Element nicht mit der Stilabfrage überein, da der Wert der benutzerdefinierten Eigenschaft derselbe ist wie der initial-value-Wert. Der benutzerdefinierte Eigenschaftswert für das Element (und alle Elemente, die diesen Wert erben) ist immer noch rebeccapurple. Nur Elemente, die sich vom Anfangswert unterscheiden, in diesem Fall das <main> und seine Nachkommen, die diesen geänderten Wert erben, sind eine Übereinstimmung.

Benutzerdefinierte Eigenschaft mit einem Wert

Wenn eine Stilabfrage einen Wert für die benutzerdefinierte Eigenschaft enthält, muss der berechnete Wert des Elements für diese Eigenschaft eine genaue Übereinstimmung sein, wobei nur äquivalente Werte eine Übereinstimmung sind, wenn die benutzerdefinierte Eigenschaft mit einer @property-At-Regel (oder einem CSS.registerProperty()-Methodenaufruf) mit einem syntax-Descriptor definiert wurde.

@container style(--accent-color: blue) {
  /* <stylesheet> */
}

Diese Container-Stilabfrage stimmt mit jedem Element überein, das blue als computed_value der benutzerdefinierten --accent-color-Eigenschaft hat.

In diesem Fall werden andere Farbwerte, die sRGB blue entsprechen (wie der Hexadezimalcode #0000ff), nur dann übereinstimmen, wenn die --accent-color-Eigenschaft als Farbe mit @property oder CSS.registerProperty() definiert wurde, zum Beispiel:

@property --accent-color {
  syntax: "<color>";
  inherits: true;
  initial-value: #00f;
}

In diesem Fall würde, wenn der Wert von --accent-color auf blue, #00f, #0000ff, rgb(0 0 255 / 1) oder rgb(0% 0% 100%) gesetzt wäre, es true für @container style(--accent-color: blue) zurückgeben.

Beispiel

In diesem Beispiel haben wir ein <fieldset> mit vier Optionskästchen. Die vierte Option enthält ein Text<input>, um eine benutzerdefinierte Farbe einzugeben.

<fieldset>
  <legend>Change the value of <code>--theme</code></legend>
  <ol>
    <li>
      <input type="radio" name="selection" value="red" id="red" />
      <label for="red">--theme: red;</label>
    </li>
    <li>
      <input type="radio" name="selection" value="green" id="green" />
      <label for="green">--theme: green</label>
    </li>
    <li>
      <input type="radio" name="selection" value="blue" id="blue" />
      <label for="blue">--theme: blue</label>
    </li>
    <li>
      <input type="radio" name="selection" value="currentcolor" id="other" />
      <label for="other">Other</label>
      <label for="color">color:</label>
      <input text="checkbox" name="selection" value="currentcolor" id="color" />
    </li>
  </ol>
</fieldset>
<output>I change colors</output>

JavaScript aktualisiert den Wert der CSS---theme-Variablen auf dem <body>-Element, das ein Vorfahre des <fieldset> und der <output>-Elemente ist, wann immer ein Optionsfeld ausgewählt wird. Wenn das Text-<input> aktualisiert wird, wird der value des other-Optionsfeldes nur aktualisiert, wenn das other-Optionsfeld aktiviert ist, wodurch wiederum der Wert von --theme aktualisiert wird.

const radios = document.querySelectorAll('input[name="selection"]');
const body = document.querySelector("body");
const other = document.getElementById("other");
const color = document.getElementById("color");

for (let i = 0; i < radios.length; i++) {
  radios[i].addEventListener("change", (e) => {
    body.style.setProperty("--theme", e.target.value);
  });
}
color.addEventListener("input", (e) => {
  other.style.setProperty("value", e.target.value);
  if (other.checked) {
    body.style.setProperty("--theme", e.target.value);
  }
});

Wir verwenden die @property-At-Regel, um eine CSS-Variable --theme als <color>-Wert zu definieren und setzen den initial-value auf #00F, wobei sichergestellt wird, dass äquivalente Farben eine Übereinstimmung sind, unabhängig davon, welche Syntax verwendet wird (z.B. #F00 ist gleich rgb(255 0 0), #ff0000 und red).

@property --theme {
  syntax: "<color>";
  inherits: true;
  initial-value: #f00;
}

output {
  padding: 3px 5px;
  margin-top: 5px;
}

Die erste Stil-Feature-Abfrage ist eine benutzerdefinierte Eigenschaft ohne Wert. Dieser Abfragetyp gibt true zurück, wenn der berechnete Wert für den benutzerdefinierten Eigenschaftswert sich von dem initial-value für diese Eigenschaft unterscheidet. In diesem Fall wird er true sein, wenn der Wert von --theme einem anderen Wert als einem syntaxäquivalenten Wert von #f00 (wie red) entspricht. Wenn dies true ist, wird der <output> eine 5px gepunktete Umrandung haben. Die Rahmenfarbe ist der aktuelle Wert von --theme. Die Standardtextcolor ist grau.

@container style(--theme) {
  output {
    outline: 5px dotted var(--theme);
    color: #777;
  }
}

Die zweite und dritte Stilabfragen enthalten Werte für die benutzerdefinierte Eigenschaft. Diese stimmen überein, wenn der --theme-Wert des Containers einer äquivalenten Farbe zu dem aufgelisteten Wert entspricht, selbst wenn dieser Wert dem initial-value entspricht. Die erste Abfrage stimmt mit Elementen überein, deren --theme-Wert red, blue oder green entspricht. Wenn dies der Fall ist, wird die color der aktuellen --theme-Wert sein (im Falle von blue und green wird das durch die erste Stilabfrage festgelegte Grau überschrieben).

Die zweite Stilabfrage besagt, dass, wenn --theme red ist, der Inhalt des <output> ebenfalls fett wird. Wir haben dies getan, um besser zu demonstrieren, dass die Container-Abfrage eine Übereinstimmung ist.

@container style(--theme: green) or style(--theme: blue) or style(--theme: red) {
  output {
    color: var(--theme);
  }
}

@container style(--theme: red) {
  output {
    font-weight: bold;
  }
}

Versuchen Sie, verschiedene Farbwerte in das Textfeld einzugeben. Ihnen wird auffallen, dass Werte, die sRGB-Äquivalente von red sind, das <output> rot machen — da es style(--theme: red) entspricht — während sie die Umrandung entfernen, weil style(--theme) false zurückgibt, wenn der Wert des Elements für --theme dem Anfangswert für --theme entspricht, der durch die @property-At-Regel definiert wurde. Jeder nicht-rote sRGB-gültige Farbwert, einschließlich currentcolor oder hsl(180 100% 50%), usw., macht die erste Stilabfrage true; sie sind Werte, die sich von dem initial-value unterscheiden.

Weil wir syntax: "<color>"; gesetzt haben, kann der CSS-Variable nur gültigen <color>-Werten zugewiesen werden. Gültige Werte für die color-Eigenschaft, die keine <color>-Werte sind, wie z.B. unset oder inherit, sind ungültig für diese benutzerdefinierte Eigenschaft und werden ignoriert.

Wenn Sie unset oder gibberish eingeben, aktualisiert das JavaScript das style des <body> auf --theme: unset oder --theme: gibberish. Keines von beiden sind Farben. Beide sind ungültig und werden ignoriert. Dies bedeutet, dass der Anfangswert geerbt und unverändert bleibt, wobei style(--theme) false zurückgibt und style(--theme: red) true.

Container-Abfragen können innerhalb anderer Container-Abfragen verschachtelt werden. Die innerhalb mehrerer verschachtelter Container-Abfragen definierten Stile werden angewendet, wenn alle umschließenden Container-Abfragen true sind.

@container style(--theme: red) {
  output {
    outline: 1px dotted;
  }
  @container style(--theme: purple) {
    output {
      outline: 5px dotted;
    }
  }
}

In diesem Fall wird das <output> eine 5px gepunktete Umrandung haben, wenn es in einem Container verschachtelt ist, in dem --theme: purple gesetzt ist, und dieser Container innerhalb eines Containers verschachtelt ist, dessen --theme-Wert red ist.

Noch nicht in einem Browser unterstützt, kann die style()-Funktionsnotation reguläre CSS-Deklarationen einschließlich CSS-Eigenschaften und Eigenschaftswertpaaren enthalten.

@container style(font-weight: bold) {
  b,
  strong {
    background: yellow;
  }
}

Wenn dies unterstützt wird, wird dieses einfache Beispiel den Hintergrund jeder <b> und <strong>-Elemente gelb machen, wenn der Elterncontainer bereits bold ist.

Das Matching erfolgt gegen den berechneten Wert des Elterncontainers; Wenn der berechnete font-weight des Elterncontainers bold ist (nicht bolder oder 900), gibt es eine Übereinstimmung. Genau wie bei benutzerdefinierten Eigenschaftsabfragen mussten wir keine Elemente als Stilcontainer definieren, da alle Elemente standardmäßig Stilcontainer sind. Solange ein Element keinen container-name gesetzt hat, wenn es font-weight: bold gesetzt oder geerbt hat, wird es zutreffen.

Stilmerkmale, die eine Kurzform-Eigenschaft abfragen, werden true sein, wenn die berechneten Werte für jede ihrer Langform-Eigenschaften übereinstimmen, und andernfalls false. Beispielsweise wird @container style(border: 2px solid red) true sein, wenn alle 12 Langform-Eigenschaften (border-bottom-style, usw.), die diese Kurzform ausmachen, auf denselben äquivalenten Werte gesetzt sind.

Die globalen CSS-Werte revert und revert-layer sind als Werte in einem <style-feature> ungültig und verursachen, dass die Container-Stilabfrage false ist.

Wenden Sie die Stile, die Sie in der Stilabfrage abfragen, nicht auf das Element an, das Sie mit dieser Abfrage stylen, da dies zu einer Endlosschleife führen kann.

Es wird erwartet, dass Stilabfragen auch Eigenschaften in einem booleschen Kontext akzeptieren. Die Stilabfrage gibt false zurück, wenn der Wert der Eigenschaft der Anfangswert dieser Eigenschaft ist (wenn er nicht geändert wurde), und true andernfalls.

@container style(font-weight) {
}

Das obige Beispiel gibt true für jedes Element zurück, das einen Wert für font-weight hat, der von seinem Anfangswert abweicht. User-Agent-Stylesheets setzen font-weight: bold für heading- und <th>-Elemente, zum Beispiel. Einige Browser setzen <strong> und <b> auf bold, andere auf bolder. <optgroup> hat ebenfalls manchmal ein anderes font-weight als normal, das vom User-Agent gesetzt wird. Solange das font-weight des Elements nicht der Standardwert dieses User-Agents ist, gibt die Stilabfrage true zurück.

Diese Funktionen werden noch von keinem Browser unterstützt.

• Media-Abfragen
• CSS @container At-Regel
• CSS contain Eigenschaft
• CSS container Kurzschrift-Eigenschaft
• CSS container-name Eigenschaft
• Verwendung von Container-Scrollzustand-Abfragen
• Verständnis von aspect-ratio
• Erste Schritte mit Stilabfragen (2022)
• Stilabfragen über una.im (2022)