Eine Container Query richtet sich nach der Breite des umgebenden Bereichs statt nach der des Fensters. Damit werden Bausteine wirklich wiederverwendbar.
- Container Query
CSS-Abfrage, die Regeln an die Größe des umgebenden Bereichs knüpft statt an die des Fensters.
Beispiel: „Eine Container Query fragt, wie viel Platz ein Baustein tatsächlich hat.“
Das Problem, das sie löst
Eine Media Query kennt nur die Fensterbreite. Dieselbe Karte steht aber einmal über die volle Breite und einmal in einer schmalen Seitenleiste; beim Fenster ändert das nichts. Bisher brauchte es dafür zusätzliche Klassen von außen.
.karten { container-type: inline-size; }
@container (min-width: 400px) {
.karte { display: grid; grid-template-columns: 120px 1fr; }
}Was das in der Praxis ändert
Ein Baustein bringt sein Verhalten selbst mit und passt überall, wo man ihn hinstellt. Für Komponentenbibliotheken und Baukastensysteme ist das ein Unterschied ums Ganze, weil der Kontext nicht mehr mitgepflegt werden muss.