Container-Größen- und Stilabfragen verwenden

Container-Größenabfragen

Container-Größenabfragen werden anhand einer Größenbedingung gefiltert. Die zugehörigen Stile werden auf enthaltene Elemente angewendet, wenn das umschließende Element als Container deklariert wurde und die Container-Bedingung für dieses Element erfüllt ist. Der Größenabfrage-Container eines Elements ist der nächstgelegene Vorfahr mit entsprechender Containment-Eigenschaft.

Elemente werden als Container für Größenabfragen deklariert, indem ihre Eigenschaft container-type (oder die Kurzschreibweise container) 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 Containern für Größenabfragen fügt ihnen Containment hinzu. Das ist aus Leistungsgründen notwendig: Die Größe jedes Elements im DOM ständig abzufragen, würde die Leistung und das Nutzererlebnis beeinträchtigen. Außerdem könnte eine Endlosschleife entstehen, wenn ein Stil eines Nachfahren die Größe des Container-Elements verändert.

In einer Container-Größenabfrage enthält die <container-condition> eine oder mehrere <size-query>-Abfragen. Jede Größenabfrage enthält den Namen eines Größenmerkmals, einen Vergleichsoperator und einen Wert. Die abfragbaren Größenmerkmale sind auf width, height, inline-size, block-size, aspect-ratio und orientation beschränkt. Die boolesche Syntax und die Logik zum Verknüpfen mehrerer <size-query>-Abfragen entsprechen denen von Größenmerkmalabfragen mit @media.

form {
  container-type: inline-size;
}

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

Die <container-condition> in diesem Beispiel enthält eine einzelne <size-query>-Abfrage: (10em <= width <= 20em). In diesem Fall kommen alle <form>-Elemente für eine unbenannte Container-Abfrage infrage. Die in der Container-Abfrage deklarierten Stile gelten für die Nachfahren aller Formulare mit einer Breite zwischen 10em und 30em, einschließlich der Grenzwerte.

Container benennen

Eine <container-condition> kann optional einen container-name enthalten, bei dem zwischen Groß- und Kleinschreibung unterschieden wird. Ein Container-Name macht die Container-Bedingung spezifischer: Sie wird nur für Elemente ausgewertet, für die dieser Name in der Eigenschaft container-name festgelegt ist.

Die Eigenschaft container-name legt eine Liste von <container-name>-Werten fest, mit denen bestimmte Abfrage-Container in @container-Regeln gezielt angesprochen werden können. Bei diesen <ident>-Werten wird zwischen Groß- und Kleinschreibung unterschieden. Ohne <container-name> bezieht sich die Abfrage nur auf den nächstgelegenen Container-Vorfahren. Ohne <container-query> erfasst die Abfrage Elemente, für die der angegebene container-name festgelegt ist (siehe Container-Abfragen nur nach Namen).

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

Stile innerhalb benannter @container-At-Regeln werden nur auf passende Elemente in Containern angewendet, für die die entsprechenden Namen festgelegt sind und die die Container-Abfragen erfüllen.

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

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

Im obigen Beispiel gelten die Stile aus dem Container-Abfrageblock für die Nachfahren aller <li>-Elemente, deren Breite größer als ihre Höhe ist. Beachten Sie, dass die Stile auch auf die Nachfahren anderer Elemente angewendet werden, für die container-name: card festgelegt ist und die die Größenabfrage erfüllen.

@container wide (width >= 20em) {
  /* styles applied to descendants of wide .sizeContainer */
}

@container narrow (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 Nachfahren aller Elemente mit class="sizeContainer" erhalten die Stile aus der Abfrage wide oder narrow.

Der Standardwert container-type: normal verhindert, dass der Container ein Größenabfrage-Container ist. Er kann aber weiterhin ein Container für Stilabfragen sein und von einer Container-Abfrage nur nach Namen erfasst werden. Der Standardwert container-name: none bedeutet, dass der Container keinen Namen hat. Er verhindert jedoch nicht, dass das Element unbenannte Abfragen erfüllt.

Container-Stilabfragen

Eine Container-Stilabfrage ist eine @container-Abfrage, die berechnete Stile des Container-Elements auswertet, die in einer oder mehreren funktionalen style()-Notationen angegeben sind. Die boolesche Syntax und die Logik zum Verknüpfen von Stilmerkmalen in einer Stilabfrage entsprechen denen von CSS-Feature-Abfragen. Der einzige Unterschied ist der Funktionsname: style() innerhalb eines <style-feature> statt supports() innerhalb einer <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 genau ein <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. Derzeit werden als Stilmerkmale nur benutzerdefinierte Eigenschaften unterstützt, mit oder ohne Wert. Siehe die Browser-Kompatibilitätstabelle für @container.

Wenn das <style-feature> einen Wert enthält, ergibt die Stilabfrage „wahr“, falls der berechnete Wert der als style()-Argument übergebenen benutzerdefinierten Eigenschaft (oder künftig der CSS-Deklaration) für den abgefragten Container zutrifft. Andernfalls ergibt sie „falsch“. Ein Stilmerkmal ohne Wert ergibt „wahr“, wenn sich der berechnete Wert vom Anfangswert der betreffenden Eigenschaft unterscheidet.

Künftig werden wir Stilabfragen wie folgt schreiben können:

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

Die funktionale Notation style() unterscheidet Stilabfragen von Größenabfragen. Obwohl dies noch nicht unterstützt wird, werden sich künftig auch reguläre CSS-Deklarationen wie max-width: 600px abfragen lassen. Die Abfrage @container (max-width: 600px) ist eine Größenabfrage; dafür ist Containment durch container-type oder die Kurzschreibweise container erforderlich. Sie ergibt „wahr“, wenn der Container höchstens 600px breit ist. Das unterscheidet sich von @container style(max-width: 600px): Diese Stilabfrage wird, sobald sie unterstützt wird, „wahr“ ergeben, wenn der max-width-Wert des Containers 600px beträgt.

Solange Stilabfragen für reguläre CSS-Deklarationen und -Eigenschaften nicht unterstützt werden, können wir als style()-Parameter nur benutzerdefinierte Eigenschaften mit oder ohne Wert verwenden:

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

Einige bereits erwähnte Punkte sind besonders wichtig:

• Alle Elemente können Container für Stilabfragen sein; container-type muss dafür nicht gesetzt werden. Wenn Stile von Nachfahren die berechneten Stile eines Vorfahren nicht beeinflussen, ist kein Containment erforderlich.
• Eine <container-condition> kann sowohl Stil- als auch Größenmerkmale enthalten. Wenn Sie Größenmerkmale in Ihrer Abfrage verwenden, stellen Sie sicher, dass für Ihre Container-Elemente container-type auf size oder inline-size gesetzt ist.
• Wenn ein Element niemals als Container berücksichtigt werden soll, geben Sie ihm einen container-name, der nicht verwendet wird. container-name: none entfernt alle einem Container zugeordneten Abfragenamen; es verhindert nicht, dass das Element ein Container für Stilabfragen ist.
• Zum Zeitpunkt der Erstellung dieses Artikels (Februar 2024) funktionieren Container-Stilabfragen in der style()-Abfrage nur mit Werten benutzerdefinierter CSS-Eigenschaften.

Sehen wir uns nun die verschiedenen Arten von <style-feature> genauer an.

Stilabfragen für benutzerdefinierte Eigenschaften

Mit Stilabfragen für benutzerdefinierte Eigenschaften können Sie die benutzerdefinierten Eigenschaften eines Elternelements abfragen, die auch „CSS-Variablen“ genannt werden. Sie werden in eine <style-query> aufgenommen wie jede reguläre CSS-Eigenschaft in eine Feature-Abfrage: entweder mit oder ohne Wert.

Abfragen einer einzelnen benutzerdefinierten Eigenschaft

Der <style-query>-Parameter der funktionalen Notation style() kann lediglich den Namen einer CSS-Variablen enthalten, also eine benutzerdefinierte Eigenschaft ohne Wert. Wenn kein Wert angegeben ist, ergibt die Abfrage „falsch“, sofern der Wert dem Wert des Deskriptors initial-value in der At-Regel @property entspricht, falls ein solcher vorhanden ist. Die Stilabfrage ergibt „wahr“ und erfasst alle Elemente, deren Wert der benutzerdefinierten Eigenschaft vom initial-value abweicht. Wurde die benutzerdefinierte Eigenschaft ohne Registrierung deklariert, erfasst sie alle Elemente mit einem beliebigen Wert für diese Eigenschaft.

Nicht registrierte benutzerdefinierte Eigenschaften

Wenn CSS-Variablen durch eine Wertzuweisung an eine benutzerdefinierte CSS-Eigenschaft eingeführt werden, ergeben Abfragen der benutzerdefinierten Eigenschaft ohne Wert immer „wahr“.

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

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

In diesem Beispiel erfasst die Container-Abfrage das Element, auf dem die Eigenschaft --theme-color deklariert wurde, sowie alle seine Nachfahren. Da die CSS-Variable --theme-color auf :root deklariert wurde, ist die Stilabfrage style(--theme-color) für jedes Element innerhalb dieses DOM-Knotens wahr.

Registrierte Eigenschaften

Registrierte benutzerdefinierte Eigenschaften verhalten sich anders. Wenn eine Eigenschaft ausdrücklich mit der CSS-At-Regel @property oder über JavaScript mit CSS.registerProperty() definiert wurde, ergibt die Stilabfrage style(--theme-color) für Elemente nur dann „wahr“, wenn der berechnete Wert von --theme-color für das Element vom initial-value in der ursprünglichen Definition dieser benutzerdefinierten Eigenschaft abweicht.

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

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

main {
  --theme-color: blue;
}

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

In diesem Beispiel erfüllt das Element :root die Stilabfrage NICHT, weil der Wert der benutzerdefinierten Eigenschaft dem initial-value entspricht. Der Wert der benutzerdefinierten Eigenschaft für dieses Element (und alle Elemente, die den Wert erben) ist dennoch rebeccapurple. Nur Elemente, deren Wert vom Anfangswert abweicht – hier das <main>-Element und seine Nachfahren, die den geänderten Wert erben –, erfüllen die Abfrage.

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 exakt übereinstimmen. Gleichwertige Werte stimmen nur dann überein, wenn die benutzerdefinierte Eigenschaft mit einer @property-At-Regel (oder einem Aufruf der Methode CSS.registerProperty()) definiert wurde, die einen syntax-Deskriptor enthält.

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

Diese Container-Stilabfrage erfasst jedes Element, bei dem blue der berechnete Wert der benutzerdefinierten Eigenschaft --accent-color ist.

Andere Farbwerte, die dem sRGB-Wert blue entsprechen (etwa der Hexadezimalcode #0000ff), stimmen in diesem Fall nur überein, wenn die Eigenschaft --accent-color mit @property oder CSS.registerProperty() als Farbe definiert wurde, beispielsweise:

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

Wenn der Wert von --accent-color in diesem Fall auf blue, #00f, #0000ff, rgb(0 0 255 / 1) oder rgb(0% 0% 100%) gesetzt wäre, würde @container style(--accent-color: blue) „wahr“ ergeben.

Beispiel

In diesem Beispiel gibt es ein <fieldset> mit vier Optionsfeldern. Die vierte Option enthält ein Text-<input>, in das eine benutzerdefinierte Farbe eingegeben werden kann.

<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 name="selection-value" value="currentColor" id="color" />
    </li>
  </ol>
</fieldset>
<output>I change colors</output>

JavaScript aktualisiert den Wert der CSS-Variablen --theme auf dem <body>-Element, einem Vorfahren der Elemente <fieldset> und <output>, sobald ein Optionsfeld ausgewählt wird. Wenn das Text-<input> aktualisiert wird, wird der value des Optionsfelds other nur aktualisiert, wenn dieses Optionsfeld ausgewählt ist. Dadurch wird wiederum der Wert von --theme aktualisiert.

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

for (const radio of radios) {
  radio.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 At-Regel @property, um die CSS-Variable --theme als <color>-Wert zu definieren, und setzen initial-value auf red. So stellen wir sicher, dass gleichwertige Farben unabhängig von der verwendeten Syntax übereinstimmen (beispielsweise ist red gleichwertig mit rgb(255 0 0), #ff0000 und #f00).

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

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

Die erste Stilmerkmalabfrage betrifft eine benutzerdefinierte Eigenschaft ohne Wert. Dieser Abfragetyp ergibt „wahr“, wenn sich der berechnete Wert der benutzerdefinierten Eigenschaft vom initial-value dieser Eigenschaft unterscheidet. Hier ist das der Fall, wenn --theme einen anderen Wert als red oder einen syntaktisch gleichwertigen Wert (etwa #ff0000) hat. Ist die Bedingung erfüllt, erhält das <output> eine gepunktete Umrisslinie mit einer Breite von 5px. Die Farbe der Umrisslinie ist der aktuelle Wert von --theme. Die standardmäßige Text-color ist Grau.

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

Die zweite und die dritte Stilabfrage enthalten Werte für die benutzerdefinierte Eigenschaft. Sie treffen zu, wenn der --theme-Wert des Containers einer der angegebenen Farben entspricht, selbst wenn dieser Wert dem initial-value entspricht. Die erste dieser Abfragen erfasst Elemente, deren --theme-Wert red, blue oder green entspricht. In diesem Fall ist color der aktuelle Farbwert von --theme (bei blue und green wird dabei das in der ersten Stilabfrage festgelegte Grau überschrieben).

Die zweite Stilabfrage legt fest, dass der Inhalt von <output> zusätzlich fett dargestellt wird, wenn --theme red entspricht. So lässt sich besser erkennen, dass die Container-Abfrage zutrifft.

@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. Sie werden möglicherweise feststellen, dass sRGB-Werte, die red entsprechen, das <output> rot färben – weil sie style(--theme: red) erfüllen –, während die Umrisslinie entfernt wird. Der Grund dafür ist, dass style(--theme) „falsch“ ergibt, wenn der Wert von --theme für das Element dem Anfangswert von --theme entspricht, der durch die At-Regel @property definiert wurde. Jeder gültige sRGB-Farbwert außer Rot, einschließlich currentColor oder hsl(180 100% 50%), lässt die erste Stilabfrage „wahr“ ergeben: Diese Werte unterscheiden sich vom initial-value.

Da wir syntax: "<color>"; festgelegt haben, können der CSS-Variablen nur gültige <color>-Werte zugewiesen werden. Für die Eigenschaft color gültige Werte, die keine <color>-Werte sind, etwa unset oder inherit, sind für diese benutzerdefinierte Eigenschaft ungültig und werden ignoriert.

Wenn Sie unset oder gibberish eingeben, aktualisiert JavaScript den style auf dem <body>-Element auf --theme: unset beziehungsweise --theme: gibberish. Keiner dieser Werte ist eine Farbe. Beide sind ungültig und werden ignoriert. Daher wird der unveränderte Anfangswert geerbt: style(--theme) ergibt „falsch“ und style(--theme: red) ergibt „wahr“.

Einfache Syntax und Bereichssyntax in Stilabfragen

Wenn ein <style-feature> einen Wert enthält, können Sie den Vergleich auf zwei verschiedene Arten ausdrücken. Sie sehen ähnlich aus, verhalten sich aber sehr unterschiedlich. Daher ist es wichtig, die richtige Form zu wählen.

Die einfache Syntax verwendet einen Doppelpunkt, wie bei einer CSS-Deklaration:

@container style(--n: 3) {
  /* … */
}

Diese Form ergibt „wahr“, wenn der berechnete Wert der Eigenschaft mit dem Wert auf der rechten Seite übereinstimmt. Bei einer nicht registrierten benutzerdefinierten Eigenschaft ist der berechnete Wert der Wert der Eigenschaft in der geschriebenen Form: Der Browser wertet calc() oder andere darin enthaltene Ausdrücke nicht aus. Der Vergleich entspricht im Wesentlichen einem Vergleich der Tokens beider Werte. Um gleichwertige Werte (etwa blue und #0000ff) abzugleichen, registrieren Sie die benutzerdefinierte Eigenschaft mit @property und einem syntax-Deskriptor.

Die Bereichssyntax verwendet einen Vergleichsoperator (=, <, <=, > oder >=):

@container style(--n = 3) {
  /* … */
}

Um diese Form auszuwerten, geht der Browser wie folgt vor:

1. Er löst beide Seiten auf (Namen benutzerdefinierter Eigenschaften werden nachgeschlagen, als würden sie mit var() verwendet).
2. Er parst beide Seiten als einen der Typen <number>, <percentage>, <length>, <angle>, <time>, <frequency> oder <resolution>. Wenn eine der beiden Seiten nicht als einer dieser Typen geparst werden kann, ergibt die Abfrage „falsch“.
3. Wenn beide Seiten denselben Typ haben, berechnet er die Werte beider Seiten (einschließlich der Auswertung von calc()-Ausdrücken) und führt den numerischen Vergleich durch. Andernfalls ergibt die Abfrage „falsch“.

Betrachten Sie das folgende Beispiel, in dem --n auf einen calc()-Ausdruck gesetzt ist:

.box {
  --n: calc(6/2);
}

/* Evaluates to FALSE: */
/* the computed value of --n is the string `calc(6/2)`, which is */
/* not equal to the string `3`. */
@container style(--n: 3) {
  /* … */
}

/* Evaluates to TRUE: */
/* both sides are parsed as <integer>, calc(6/2) is computed to 3, */
/* and 3 = 3. */
@container style(--n = 3) {
  /* … */
}

Die Bereichssyntax unterstützt außerdem eine Form mit drei Werten, mit der geprüft wird, ob ein Wert innerhalb eines Intervalls liegt. Beide Vergleichsoperatoren müssen in dieselbe Richtung weisen:

@container style(0 < --n < 10) {
  /* true when --n is greater than 0 and less than 10 */
}

@container style(100px > --width > 50px) {
  /* true when --width is less than 100px and greater than 50px */
}

Die Bereichssyntax ist auch bei der Schreibweise der beiden Seiten flexibler. Jede Seite kann ein Name einer benutzerdefinierten Eigenschaft, eine var()-Referenz, ein Literalwert oder ein calc()-Ausdruck sein, und die Operanden können in beliebiger Reihenfolge stehen. Die folgenden Formen sind alle gültig:

@container style(3 = --n) {
  /* … */
}
@container style(var(--n) = 3) {
  /* … */
}
@container style(calc(6/2) = var(--n)) {
  /* … */
}

Die einfache Syntax ist restriktiver: Links muss der Name der benutzerdefinierten Eigenschaft stehen (ohne var()), rechts der Wert. Die folgenden Formen sind alle ungültig:

@container style(var(--n): 3) {
  /* … */
}
@container style(3: --n) {
  /* … */
}

Da bei der Bereichssyntax beide Seiten als einer der aufgeführten numerischen Typen geparst werden müssen, eignet sie sich nicht zum Vergleich schlüsselwortartiger Werte. Wenn beispielsweise --s: new gilt, ergibt die Abfrage style(--s = new) „falsch“ (weil new weder eine Zahl noch eine Länge usw. ist), während style(--s: new) „wahr“ ergibt.

Kurz gesagt:

• Verwenden Sie style(--variable: value) für Vergleiche mit schlüsselwort- oder zeichenfolgenartigen Werten, etwa style(--stock: low) oder style(--theme: dark).
• Verwenden Sie style(--variable = value) (oder <, <=, >, >=) für numerische Vergleiche, etwa style(--columns >= 3) oder style(--gap = 1rem).

Verschachtelte Abfragen

Container-Abfragen können innerhalb anderer Container-Abfragen verschachtelt werden. Die in mehrfach verschachtelten Container-Abfragen definierten Stile werden angewendet, wenn alle umschließenden Container-Abfragen zutreffen.

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

In diesem Fall erhält <output> einen gepunkteten Rahmen mit einer Breite von 5px, wenn es in einem Container verschachtelt ist, für den --theme: purple gesetzt ist, und dieser Container wiederum in einem Container liegt, dessen --theme-Wert red ist.

CSS-Deklarationen und -Eigenschaften in Stilabfragen

Die funktionale Notation style() kann reguläre CSS-Deklarationen einschließlich CSS-Eigenschaften und Eigenschaft-Wert-Paaren enthalten. Dies wird jedoch noch von keinem Browser unterstützt.

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

Sobald dies unterstützt wird, färbt dieses einfache Beispiel den Hintergrund aller <b>- und <strong>-Elemente gelb, wenn das Elternelement bereits bold ist.

Der Vergleich erfolgt mit dem berechneten Wert des übergeordneten Containers. Wenn dessen berechneter font-weight-Wert bold ist (nicht bolder oder 900), trifft die Abfrage zu. Wie bei Container-Stilabfragen für benutzerdefinierte Eigenschaften mussten wir keine Elemente als Container für Stilabfragen definieren, da alle Elemente standardmäßig solche Container sind. Solange für ein Element kein container-name festgelegt ist, erfüllt es die Abfrage, wenn font-weight: bold für es gesetzt wurde oder es diesen Wert geerbt hat.

Stilmerkmale, die eine Kurzschreibweise-Eigenschaft abfragen, ergeben „wahr“, wenn die berechneten Werte aller zugehörigen Einzeleigenschaften übereinstimmen, andernfalls „falsch“. Beispielsweise ergibt @container style(border: 2px solid red) „wahr“, wenn alle 12 Einzeleigenschaften (border-bottom-style usw.), aus denen diese Kurzschreibweise besteht, auf die entsprechenden gleichwertigen Werte gesetzt sind.

Die globalen CSS-Werte revert und revert-layer sind als Werte in einem <style-feature> ungültig und führen dazu, dass die Container-Stilabfrage „falsch“ ergibt.

Wenden Sie die Stile, die Sie in der Stilabfrage abfragen, nicht auf das Element an, das Sie mit dieser Abfrage gestalten. Dies könnte eine Endlosschleife verursachen.

Es wird erwartet, dass Stilabfragen auch Eigenschaften in einem booleschen Kontext akzeptieren werden. Die Stilabfrage ergibt „falsch“, wenn der Wert der Eigenschaft ihrem Anfangswert entspricht (also nicht geändert wurde), und andernfalls „wahr“.

@container style(font-weight) {
}

Das obige Beispiel ergibt „wahr“ für jedes Element, dessen font-weight-Wert vom Anfangswert abweicht. User-Agent-Stylesheets setzen beispielsweise font-weight: bold für heading- und <th>-Elemente. Manche Browser setzen <strong> und <b> auf bold, andere auf bolder. Für <optgroup> wird vom User Agent mitunter ebenfalls ein anderer font-weight-Wert als normal festgelegt. Solange der font-weight-Wert eines Elements nicht dem Standardwert dieses User Agents entspricht, ergibt die Stilabfrage „wahr“.

Diese Funktionen werden noch von keinem Browser unterstützt.

Siehe auch

• Medienabfragen
• CSS-At-Regel @container
• CSS-Eigenschaft contain
• CSS-Kurzschreibweise container
• CSS-Eigenschaft container-name
• Container-Scrollzustandsabfragen verwenden
• aspect-ratio verstehen
• Einstieg in Stilabfragen (2022)
• Stilabfragen auf una.im (2022)