Style Queries
Container Queries, die nach dem Wert einer eigenen CSS-Variable fragen statt nach der Breite. Lässt eine Komponente ihr Aussehen anhand eines Zustands ändern, der anderswo im Baum gesetzt wurde.
Die Schreibweise lautet @container style(--variant: kompakt), und die Regel greift, wenn der nächstgelegene Container genau diesen Wert für die Variable trägt. Der Vorteil: Man kommt ohne Klassennamen aus, die durch mehrere Komponentenebenen durchgereicht werden müssten — ein Elternelement setzt eine Variable, und alles darunter kann darauf reagieren, ohne zu wissen, wer sie gesetzt hat, oder selbst eine Klasse aufgeklebt zu bekommen. Das eignet sich besonders für Themes und für Varianten derselben Karte in unterschiedlichen Kontexten. Die Funktion gibt es in Chromium seit Version 111, allerdings nur für eigene Eigenschaften — die Abfrage gewöhnlicher Eigenschaften wie font-size befindet sich noch in der Spezifikation, weil sie die Tür zu zirkulären Abhängigkeiten öffnet.