Verwendung von Containergrößen- und Stilabfragen
Baseline 2023 *Newly available
Since February 2023, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.
* Some parts of this feature may have varying levels of support.
Container-Abfragen ermöglichen es Ihnen, Stile auf Elemente anzuwenden, die innerhalb eines bestimmten Containers verschachtelt sind, basierend auf den Eigenschaften dieses Containers. Die Abfrage gibt wahr oder falsch zurück, je nachdem, ob die Bedingung für den Container erfüllt ist.
Container-Abfragen sind ähnlich wie Media-Abfragen. Die @media
At-Regel ermöglicht es, Stile auf Elemente basierend auf der Größe des Viewports oder anderen Gerätemerkmalen anzuwenden. Ähnlich ermöglicht die @container
At-Regel das Anwenden von Stilen auf Elemente basierend auf der Größe oder anderen Stilmerkmalen eines enthaltenen Elements anstelle des Viewports. Container-Abfragen haben dieselben Syntaxregeln und logischen Operatoren wie Media-Abfragen.
@container <container-condition># {
/* <stylesheet> */
}
Es gibt zwei Arten von Container-Abfragen: Containergrößen-Abfragen und Containerstil-Abfragen:
- Containergrößen-Abfragen
-
Größen-Abfragen ermöglichen die Anwendung von Stilen auf Elemente basierend auf der aktuellen Größe eines enthaltenen Elements, einschließlich der Ausrichtung und des Seitenverhältnisses. Die enthaltenen Elemente müssen explizit als Größen-Abfrage-Container deklariert werden.
- Containerstil-Abfragen
-
Stilabfragen ermöglichen das Anwenden von Stilen auf Elemente basierend auf den Stilmerkmalen eines enthaltenen Elements. Jedes nicht leere Element kann ein Stilabfrage-Container sein. Derzeit ist das einzige von Stilabfragen unterstützte Stilmerkmal CSS benutzerdefinierte Eigenschaften. In diesem Fall gibt die Abfrage wahr oder falsch zurück, je nach dem berechneten Wert der benutzerdefinierten Eigenschaften des enthaltenen Elements. Wenn Containerstil-Abfragen vollständig unterstützt werden, ermöglichen sie das Anwenden von Stilen auf Nachkommen eines beliebigen Elements basierend auf einer beliebigen Eigenschaft, Deklaration oder berechneten Wert - zum Beispiel, wenn der Container
display: inline flex
ist oder eine nicht transparente Hintergrundfarbe hat.
In diesem Leitfaden lernen wir die Grundlagen von Container-Abfragen, indem wir uns Folgendes ansehen:
- Containergrößen-Abfragen,
- Benennung von Containern, um ihren Bereich einzuschränken, und
- die Verwendung der
style()
-Funktionsnotation innerhalb der@container
-At-Regel<container-condition>
, um Stilabfragen mit benutzerdefinierten Eigenschaften zu erstellen.
Containergrößen-Abfragen
Containergrößen-Abfragen werden durch eine Größenbedingung gefiltert. Die zugehörigen Stile werden auf enthaltene Elemente angewendet, wenn das Container-Element als Container deklariert wurde und die Container-Bedingung für dieses Element zutrifft. Der Größen-Container eines Elements ist der nächste Vorfahre mit Containment.
Elemente werden als Größen-Abfrage-Container deklariert, indem sie ihre container-type
-Eigenschaft (oder die container
-Kurzform) auf size
oder inline-size
setzen.
@container (orientation: landscape) {
/* styles applied to descendants of this size container */
}
.sizeContainer {
container-type: size;
}
Die Deklaration von Größen-Abfrage-Containern fügt Containment hinzu. Dies ist eine Leistungsnotwendigkeit - die Abfrage der Größe jedes Elements im DOM würde die Leistung und Benutzererfahrung beeinträchtigen. Zusätzlich könnte bei einer Änderung des Stils eines Nachkommens, die die Größe des Container-Elements verändert, eine Endlosschleife auftreten.
In einer Containergrößen-Abfrage umfasst die <container-condition>
eine oder mehrere <size-query>
s. Jede Größen-Abfrage enthält einen Größenmerkmalnamen, 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 Logik, die eine oder mehrere <size-query>
s kombiniert, ist dieselbe wie für @media
Größenmerkmal-Abfragen.
form {
container-type: inline-size;
}
@container (10em <= width <= 20em) {
/* styles */
}
Die <container-condition>
in diesem Beispiel enthält eine einzige <size-query>
— (10em <= width <= 20em)
. In diesem Fall sind alle <form>
-Elemente potenzielle Übereinstimmungen für jede unbenannte Containerabfrage. Die innerhalb unserer Containerabfrage deklarierten Stile gelten für die Nachkommen aller Formulare, die zwischen 10em
und 30em
breit sind, einschließlich.
Benennung von Containern
Eine <container-condition>
kann einen optionalen, groß-/kleinschreibungsempfindlichen container-name
enthalten. Ein Containername macht die Containerbedingung spezifischer – sie wird nur für Elemente ausgewertet, denen dieser Name in der container-name
-Eigenschaft zugewiesen wurde.
Die container-name
-Eigenschaft gibt eine Liste von Abfrage-<container-name>
-Werten an, die in @container
-Regeln verwendet werden können; dies sind groß-/kleinschreibungsempfindliche <ident>
-Werte. Die Container-Namen ermöglichen das Targetieren 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
-Kurzform verwenden, um spezifische Container-Elemente zu targetieren. Stile innerhalb der benannten @container
-Regeln werden nur auf übereinstimmende Elemente innerhalb von Containern mit den gesetzten Namen angewendet, die die Containerabfragen 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 Containerabfrageblocks auf die Nachkommen aller <li>
-Elemente mit einer Breite angewendet, die größer als ihre Höhe ist. Beachten Sie, dass auch andere Elemente mit container-name: card
, die mit der Größenabfrage übereinstimmen, diese Stile auf die Nachkommen ihrer Elemente anwenden werden.
@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 aller Elemente 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 wird, aber er kann immer noch ein Stilcontainer sein. Der Standardwert container-name: none
bedeutet, dass der Container keinen Namen hat, verhindert jedoch nicht, dass das Element mit nicht benannten Abfragen übereinstimmt.
Mit Containerabfragen sind wir nicht auf Größenabfragen beschränkt! Sie können auch die Stilmerkmale eines Containers abfragen.
Containerstil-Abfragen
Eine Containerstil-Abfrage 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, die verwendet wird, um Stilmerkmale in eine Stilabfrage zu kombinieren, ist dieselbe wie bei CSS-Feature-Abfragen. Der einzige Unterschied ist der Funktionsname — style()
innerhalb eines <style-feature>
im Gegensatz zu 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 Stilmerkmal sind benutzerdefinierte Eigenschaften, mit oder ohne Wert. Siehe die Tabelle zur Browser-Kompatibilität.
Wenn das <style-feature>
einen Wert enthält, evaluiert die Stilabfrage zu wahr, wenn der berechnete Wert der benutzerdefinierten Eigenschaft (oder in Zukunft der CSS-Deklaration) für den abgefragten Container wahr ist. Andernfalls wird false ausgegeben.
Ein Stilmerkmal ohne Wert evaluiert zu wahr, wenn der berechnete Wert vom Anfangswert der angegebenen Eigenschaft abweicht.
In Zukunft 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),
(max-width: 100vw) and style(max-width: 600px) {
/* <stylesheet> */
}
Die style()
-Funktionsnotation wird verwendet, um Stilabfragen von Größenabfragen zu unterscheiden. Obwohl derzeit nicht unterstützt, werden wir irgendwann in der Lage sein, reguläre CSS-Deklarationen wie max-width: 100vw
abzufragen. Die Abfrage @container (max-width: 100vw)
ist eine Größenabfrage; Containment mit container-type
, oder die container
-Kurzform, wird benötigt. Diese Abfrage wird wahr, wenn der Container 100vw oder weniger ist. Das unterscheidet sich von der Abfrage @container style(max-width: 100vw)
, die eine Stilabfrage ist; wenn unterstützt, wird diese Abfrage wahr, wenn der Container einen max-width
-Wert von 100vw
hat.
Bis Stilabfragen für reguläre CSS-Deklarationen und -Eigenschaften 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 wichtige Punkte, die bereits erwähnt wurden, aber wichtig zu wissen sind:
- Alle Elemente können Stilabfrage-Container sein; das Setzen eines
container-type
ist nicht erforderlich. Wenn Nachkommen-Stile die berechneten Stile eines Vorfahren nicht beeinflussen, ist Containment nicht erforderlich. - Eine
<container-condition>
kann sowohl Stil- als auch Größenmerkmale enthalten. Achten Sie darauf, dass Ihre Container-Elemente eincontainer-type
vonsize
oderinline-size
gesetzt haben, wenn Sie Größenmerkmale in Ihrer Abfrage enthalten. - 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 voncontainer-name: none
entfernt alle mit einem Container verbundenen Abfragenamen; es verhindert nicht, dass ein Element ein Stilcontainer wird. - Zum Zeitpunkt dieses Schreibens (Februar 2024) arbeiten Containerstil-Abfragen nur mit CSS-Benutzerdefinierten Eigenschaftswerten in der
style()
-Abfrage.
Nun, lassen Sie uns einen Blick auf die verschiedenen <style-feature>
-Typen werfen.
Stilabfragen für benutzerdefinierte Eigenschaften
Stilabfragen für benutzerdefinierte Eigenschaften ermöglichen es Ihnen, die benutzerdefinierten Eigenschaften, auch "CSS-Variablen" genannt, eines übergeordneten Elements abzufragen. Sie werden innerhalb einer <style-query>
genauso eingefügt, wie Sie eine reguläre CSS-Eigenschaft innerhalb einer Feature-Abfrage einfügen 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 der initial-value
-Deskriptor innerhalb der @property
-At-Regel, falls vorhanden. Die Stilabfrage gibt true zurück und passt zu allen Elementen, die einen benutzerdefinierten Eigenschaftswert haben, der sich vom initial-value
unterscheidet, oder für alle Elemente, die eine benutzerdefinierte Eigenschaft mit beliebigem Wert haben, wenn die benutzerdefinierte Eigenschaft deklariert wurde, ohne registriert zu werden.
Nicht registrierte benutzerdefinierte Eigenschaften
Wenn CSS-Variablen über eine einfache CSS-Benutzerdefinierteigenschaftswertzuweisung eingeführt werden, geben abwertslosen benutzerdefinierten Eigenschaftsabfragen immer true zurück.
:root {
--theme-color: rebeccapurple;
}
@container style(--theme-color) {
/* <stylesheet> */
}
In diesem Beispiel passt die Containerabfrage auf das Element, auf dem die --theme-color
Eigenschaft deklariert wurde und alle seine Nachkommen. Da die CSS-Variable --theme-color
auf dem :root
deklariert wurde, ist die Stilabfrage style(--theme-color)
für jedes Element innerhalb dieses DOM Knotens wahr.
Registrierte Eigenschaften
Das Verhalten von registrierten benutzerdefinierten 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 wahr zurück, wenn der berechnete Wert von --theme-color
für das Element vom initial-value
abweicht, 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
. Der Wert der benutzerdefinierten Eigenschaft für das Element (und alle die den Wert erben) ist weiterhin rebeccapurple
. Nur Elemente, die vom Anfangswert abweichen, in diesem Fall das <main>
und seine Nachkommen, die diesen geänderten Wert erben, passen.
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 exakte Übereinstimmung sein, wobei gleichwertige Werte nur dann übereinstimmen, wenn die benutzerdefinierte Eigenschaft mit einer @property
-Regel (oder einem CSS.registerProperty()
Methodenaufruf) mit einem syntax
Deskriptor definiert wurde.
@container style(--accent-color: blue) {
/* <stylesheet> */
}
Diese Containerstilabfrage stimmt mit jedem Element überein, das blue
als computed_value
der --accent-color
benutzerdefinierten Eigenschaft hat.
In diesem Fall werden andere Farbwerte, die dem sRGB blue
entsprechen (wie der hexadezimale Code #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, wenn der Wert von --accent-color
auf blue
, #00f
, #0000ff
, rgb(0 0 255 / 1)
oder rgb(0% 0% 100%)
gesetzt wurde, würde es für @container style(--accent-color: blue)
wahr sein.
Beispiel
In diesem Beispiel haben wir ein <fieldset>
mit vier Radio-Buttons. Die vierte Option beinhaltet ein Text-<input>
zum Eingeben einer benutzerdefinierten Farbe.
<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
-Variable im <body>
Element, welches ein Vorfahre des <fieldset>
und <output>
Elements ist, wann immer ein Radio-Button ausgewählt wird. Wenn das Text-<input>
aktualisiert wird, wird der value
des other
Radio-Buttons nur dann aktualisiert, wenn der other
Radio-Button aktiviert ist, was wiederum den 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 (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 den initial-value
auf #00F
zu setzen, um sicherzustellen, dass gleichwertige Farben übereinstimmen, unabhängig davon, welche Syntax verwendet wird (zum Beispiel ist #F00
gleich rgb(255 0 0)
, #ff0000
und red
).
@property --theme {
syntax: "<color>";
inherits: true;
initial-value: #f00;
}
Die erste Stilfeature-Abfrage ist eine benutzerdefinierte Eigenschaft ohne Wert. Dieser Abfragetyp gibt wahr zurück, wenn der berechnete Wert für die benutzerdefinierte Eigenschaft von dem initial-value
für diese Eigenschaft abweicht. In diesem Fall wird sie wahr, wenn der Wert von --theme
irgendetwas anderes ist als ein syntaktisch äquivalenter Wert zu #f00
(wie red
). Wenn wahr, wird das <output>
eine 5px gepunktete Umrandung haben. Die Umrandungsfarbe ist der aktuelle Wert von --theme
. Die Standardtextfarbe ist grau.
@container style(--theme) {
output {
outline: 5px dotted var(--theme);
color: #777;
}
}
Die zweite und dritte Stilabfragen beinhalten Werte für die benutzerdefinierte Eigenschaft. Diese stimmen überein, wenn der --theme
-Wert des Containers mit dem aufgelisteten Wert übereinstimmt, selbst wenn dieser Wert derselbe wie der initial-value
ist. Die erste Abfrage stimmt mit Elementen überein, deren --theme
-Wert äquivalent zu red
, blue
oder green
ist. Wenn dies der Fall ist, wird die Textfarbe der aktuelle Wert von --theme
sein (im Fall von blue
und green
wird das Grau aus der ersten Stilabfrage überschrieben).
Die zweite Stilabfrage besagt, dass, wenn --theme
äquivalent zu red
ist, der Inhalt des <output>
s ebenfalls fett wird. Wir haben dies getan, um besser zu demonstrieren, dass die Containerabfrage 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. Sie werden vielleicht bemerken, dass Werte, die sRGB-äquivalent zu red
sind, das <output>
rot machen – da sie mitstyle(--theme: red)
übereinstimmen – während sie die Umrandung entfernen, weil style(--theme)
false ergibt, wenn der Elementwert für --theme
derselbe wie der initial-value
ist, der durch die @property
-At-Regel definiert ist. Jeder nicht-rote, sRGB-gültige Farbwert, einschließlich currentcolor
oder hsl(180 100% 50%)
, usw., macht die erste Stilabfrage zu true; sie sind Werte, die sich vom initial-value
unterscheiden.
Da wir syntax: "<color>";
gesetzt haben, kann der CSS-Variable nur gültige <color>
Werte zugewiesen werden. Gültige Werte für die color
-Eigenschaft, die keine Werte <color>
-Werte sind, wie unset
oder inherit
, sind ungültig für diese benutzerdefinierte Eigenschaft und werden ignoriert.
Wenn Sie unset
oder gibberish
eingeben, aktualisiert das JavaScript den style
auf dem <body>
zu --theme: unset
oder --theme: gibberish
. Keines dieser sind Farben. Beide sind ungültig und werden ignoriert. Das bedeutet, dass der Anfangswert geerbt wird und unverändert bleibt, wobei style(--theme)
false zurückgibt und style(--theme: red)
wahr.
Hinweis:
Wenn Sie benutzerdefinierte Eigenschaften deklarieren, überlegen Sie, @property
mit dem syntax
Deskriptor zu verwenden, damit der Browser berechnete Werte korrekt vergleichen kann.
Verschachtelte Abfragen
Containerabfragen können in andere Containerabfragen verschachtelt werden. Die innerhalb mehrerer verschachtelter Containerabfragen definierten Stile werden angewendet, wenn alle umgebenden Containerabfragen wahr 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, wo --theme: purple
gesetzt ist, und dieser Container innerhalb eines Containers verschachtelt ist, dessen --theme
Wert red
ist.
Stilabfrage-CSS-Deklarationen und Eigenschaften
Noch in keinem Browser unterstützt, kann die style()
-Funktionsnotation reguläre CSS-Deklarationen einschließlich CSS-Eigenschaften und Eigenschaftswertepaaren enthalten.
@container style(font-weight: bold) {
b,
strong {
background: yellow;
}
}
Wenn unterstützt, wird dieses einfache Beispiel die Hintergrundfarbe von jedem <b>
und <strong>
Element gelb machen, wenn das übergeordnete Element bereits bold
ist.
Die Übereinstimmung erfolgt gegen den berechneten Wert des übergeordneten Containers; wenn der berechnete font-weight
des übergeordneten Elements bold
ist (nicht bolder
oder 900
), gibt es eine Übereinstimmung. Wie bei benutzerdefinierten Eigenschafts-Container-Stilabfragen mussten wir keine Elemente als Stil-Container definieren, da alle Elemente standardmäßig Stil-Container sind. Solange ein Element keinen container-name
gesetzt hat, wenn es font-weight: bold
gesetzt oder geerbt hat, wird es passen.
Stilmerkmale, die eine Kurzformeigenschaft abfragen, werden wahr sein, wenn die berechneten Werte für jeden seiner Langformeigenschaften übereinstimmen, und sonst falsch. Zum Beispiel wird @container style(
true sein, wenn alle 12 Langformeigenschaften (border
: 2px solid red)border-bottom-style
, usw.) die die Kurzform ausmachen, auf dieselben gleichwertigen Werte gesetzt sind.
Die globalen CSS-Werte revert
und revert-layer
sind als Werte in einem <style-feature>
ungültig und verursachen, dass die Containerstil-Abfrage false ist.
Wenden Sie nicht die Stile an, die Sie in der Stilabfrage abfragen, auf das Element an, das Sie mit dieser Abfrage stylen, da dies möglicherweise eine Endlosschleife verursacht.
Es wird erwartet, dass Stilabfragen auch Eigenschaften im booleschen Kontext akzeptieren. Die Stilabfrage wird false zurückgeben, wenn der Wert der Eigenschaft der Anfangswert für diese Eigenschaft ist (falls er nicht geändert wurde), und sonst true.
@container style(font-weight) {
}
Das obige Beispiel wird true für alle Elemente zurückgeben, die einen Wert für font-weight
haben, der sich von seinem Anfangswert unterscheidet. 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 auch manchmal ein font-weight
anders als normal
, das vom User-Agent gesetzt wird. Solange das font-weight
des Elements nicht der Standardwert für diesen User-Agent ist, wird die Stilabfrage wahr zurückgeben.
Diese Funktionen werden noch in keinem Browser unterstützt.
Spezifikationen
Specification |
---|
CSS Conditional Rules Module Level 5 # container-rule |
Browser-Kompatibilität
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
@container | ||||||||||||
Scroll-state queries | ||||||||||||
scroll-state_queries.scrollable | ||||||||||||
scroll-state_queries.snapped | ||||||||||||
scroll-state_queries.stuck | ||||||||||||
Style queries for custom properties |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
- In development. Supported in a pre-release version.
- In development. Supported in a pre-release version.
- No support
- No support
- Experimental. Expect behavior to change in the future.
- See implementation notes.
Siehe auch
- Media-Abfragen
- CSS
@container
At-Regel - CSS
contain
-Eigenschaft - CSS
container
-Kurzformeigenschaft - CSS
container-name
-Eigenschaft - Verständnis von
aspect-ratio
- Erste Schritte mit Stilabfragen (2022)
- Stilabfragen via una.im (2022)