Schon seit 2023 werden CSS-Container-Queries von den gängigsten Browser-Versionen unterstützt. Während die althergebrachten Media-Queries sich stets am Viewport orientierten, kann sich eine Container-Query auf eine einzelnes Blockelement beziehen. Das ist mitunter eine große Erleichterung auch bei der Anpassung älterer Webseiten, wie das folgende Beispiel zeigt.
In einem klassischen Layout mit Header, Sidebar, Footer sollen im Hauptinhaltsbereich (im Element main) zwei Textboxen untergebracht werden. Ist der Hauptinhaltsbereich breiter als 480px, sollen die Textboxen nebeneinander, andernfalls untereinander dargestellt werden. Hinzu kommt, dass die Sidebar nur oberhalb einer Breite von 640px neben dem Hauptinhalt, andernfalls unterhalb angezeigt wird, so wie es in einem responsiven Layout sinnvoll ist.
Die folgenden Bilder illustrieren dies. Bei einem sehr schmalen Viewport werden die Textboxen untereinander angezeigt (erstes Bild), bei etwas mehr Breite passen die Textboxen nebeneinander (zweites Bild), bevor die Sidebar den Hauptinhaltsbereich einzwängt (drittes Bild) und erst eine größere Gesamtbreite wieder genug Platz lässt für zwei Textboxen nebeneinander (viertes Bild):
Der HTML-Code des Hautpinhaltes könnte so ausschauen:
<main>
<h1>Main Content</h1>
<div id="boxes">
<div>
<h2>Box 1</h2>
<p>...</p>
</div>
<div>
<h2>Box 2</h2>
<p>...</p>
</div>
</div>
</main>
Früher wäre eine sehr komplexe Media-Query mit min-width und max-width notwendig gewesen, um die Bereiche zu erfassen, in denen das Elternelement (hier: div#boxes) als Flexbox definiert wird, so dass die Text-Boxen nebeneinander dargestellt werden:
@media screen and (
(
(min-width: 30em)
and
(max-width: 39.9375em)
)
or
(min-width: 42em)
) {
#boxes {
display: flex;
gap: 1em;
}
#boxes > div {
flex-grow: 1;
}
}
Wir haben hier drei Breakpoints. Die mühsam errechneten Angaben müssen mit den logischen Operatoren and und or verknüpft sowie korrekt geklammert werden.
Mit einer Container-Query geht dies sehr viel einfacher. Der Hauptinhaltsbereich (main) wird hier als Container mit dem Namen main definiert:
main {
container-name: main;
container-type: inline-size;
}
Anschließend kann eine Container-Query diesen Namen referenzieren:
@container main (width >= 30em) {
#boxes {
display: flex;
gap: 1em;
}
#boxes > div {
flex-grow: 1;
}
}
Hier können dann ganz einfach die 30em (~ 480px) als Breakpoint gesetzt werden.