Container Queries: Komponenten anhand ihres Containers statt des Viewports dimensionieren

Worum es geht

Eine Media Query fragt, wie breit der Viewport ist; eine Container Query fragt, wie breit ein bestimmtes Vorfahrenelement ist. Ein Element wird mit container-type: inline-size (Abfragen auf der Inline-Achse) oder size (beide Achsen) zum Query-Container, optional benannt mit container-name. Regeln innerhalb von @container (width > 40em) { .card { … } } gelten für Nachfahren anhand des nächstgelegenen Vorfahren mit einem Containment-Kontext, oder des benannten, wenn ein Name angegeben ist. MDN listet containerrelative Einheiten auf (cqw, cqh, cqi, cqb, cqmin, cqmax), die jeweils 1 % der Containerdimension entsprechen und überall dort verwendbar sind, wo eine Länge erlaubt ist, etwa bei font-size.

Warum es wichtig ist

Eine Komponente, die in einer Seitenleiste, einer Hauptspalte und einem Modal platziert wird, kann ihren verfügbaren Platz nicht aus der Viewport-Breite ableiten. Mit Viewport-Breakpoints braucht jede Platzierung eigene Overrides; mit Container Queries führt die Komponente ihre Breakpoints selbst mit und passt sich an, wo immer sie eingesetzt wird. Das macht Design-System-Komponenten über Layouts hinweg wiederverwendbar statt nur über Seiten hinweg.

So wird es angewendet

• Den Wrapper zum Container machen, nicht die Komponente selbst. Ein Element kann nicht auf seine eigene Grösse reagieren: Der Inhalt würde die Grösse ändern und die Abfrage umkippen lassen, was MDN als Endlosschleife beschreibt und als Grund dafür nennt, weshalb Size Containment angewendet wird.
• inline-size bevorzugen. Der Wert size enthält zusätzlich die Block-Achse, sodass das Element nicht mehr mit seinem Inhalt mitwächst, sofern es keine explizite Höhe hat.
• Container benennen, wenn Komponenten verschachtelt sind (container-name: card), und nach Namen abfragen, damit eine innere Abfrage nicht auf einen ungewollten Vorfahren zutrifft.
• cqi für fluide Schrift und Abstände innerhalb einer Komponente verwenden, eingebettet in clamp(), damit Extremwerte lesbar bleiben.
• Viewport-Media-Queries für das Seitenlayout (Spaltenzahl, Navigation) beibehalten und Container Queries für Komponenten einsetzen; beide bestehen nebeneinander.
• Breakpoints innerhalb von @container müssen literale Werte sein, da benutzerdefinierte Eigenschaften in Abfragebedingungen nicht erlaubt sind; pro Komponente an einer Stelle festhalten.

Stolpersteine

Containment verändert das Layout: Die Breite eines inline-size-Containers muss entweder aus dem Kontext stammen (ein Block-Element, das sich auf sein Elternelement streckt) oder explizit gesetzt sein, sonst kollabiert er und die Abfrage trifft nie zu. Container-Style-Queries (@container style(--x: y)) sind ein eigenes Feature; ihre Unterstützung getrennt von Size Queries prüfen. Ein Query-Container, der selbst durch seine Kinder dimensioniert wird (ein Flex-Item mit flex: 0 0 auto, eine absolut positionierte Box ohne Breite), ist die übliche Ursache dafür, dass „die Abfrage nie auslöst“.