Container Queries
Container Queries machen Komponenten responsiv abhängig von ihrem Platz im Layout, nicht von der Fensterbreite.
Ansicht
01
Verstehen
Lies die Kernidee und das Beispiel.
02
Prüfen
Beantworte die Aktiv-Checks.
03
Anwenden
Setze die Transferaufgabe um.
Lerninhalt
Verstehen & anwenden
Container definieren
Mit container-type: inline-size wird die Breite eines Elements zur Abfragebasis.
container-name gibt dem Container einen Namen.
Die Abfrage bezieht sich auf den nächsten passenden Container. Das ist besonders für wiederverwendbare Karten und Sidebar-Inhalte nützlich.
.card-wrap {
container-type: inline-size;
container-name: card;
}Auf Container reagieren
Eine @container-Regel greift, wenn der Container eine Mindestbreite erreicht.
Die Komponente kann so ihr eigenes Layout ändern.
Das vermeidet Media Queries, die nur zufällig zur tatsächlichen Komponentenbreite passen.
.card {
display: grid;
gap: 1rem;
}
@container card (min-width: 28rem) {
.card {
grid-template-columns: 10rem 1fr;
}
}Fallbacks und Grenzen
Ältere Browser ignorieren @container-Regeln.
Ein lesbares Basislayout ohne Abfrage ist deshalb Pflicht.
Container Queries ersetzen keine Media Queries für die gesamte Seite. Sie ergänzen sie für Komponenten, die in unterschiedlich breiten Bereichen stehen.
.card {
display: block;
}
@supports (container-type: inline-size) {
.card-wrap {
container-type: inline-size;
}
}Vertiefung
Die Komponente entscheidet, nicht das Fenster
Eine Media Query kennt nur den Viewport. Eine Karte in einer schmalen Sidebar und dieselbe Karte im breiten Hauptbereich brauchen aber unterschiedliche Layouts. Container Queries lösen genau dieses Problem.
Mit container-type: inline-size wird die Breite des Containers zur Abfragebasis. Die Komponente bleibt wiederverwendbar, weil sie sich an ihren tatsächlichen Platz anpasst.
.card-wrap {
container-type: inline-size;
}
.card {
display: grid;
gap: 1rem;
}
@container (min-width: 28rem) {
.card {
grid-template-columns: 9rem 1fr;
}
}Merksatz: Container Queries machen Komponenten unabhängig vom Viewport. Das Basislayout muss auch ohne Abfrage funktionieren.
Übungsaufgabe
Responsive Card-Komponente
Baue eine Karte, die unter 28rem Containerbreite einspaltig und darüber zweispaltig mit Bild links erscheint.
Das soll dein Programm können
- Container mit container-type: inline-size
- @container-Regel für min-width: 28rem
- Grid-Layout innerhalb der Karte
- Lesbares Basislayout ohne Abfrage
- Keine Media Query für die Komponente
Schreibe den Code hier oder in deiner IDE und vergleiche ihn dann mit der Lösung.
Dein Code wird automatisch auf diesem Gerät gespeichert.
Hinweis anzeigen
Setze container-type: inline-size auf den Wrapper. Innerhalb der @container-Regel änderst du grid-template-columns der Karte.
Lösung anzeigen
.card-wrap {
container-type: inline-size;
}
.card {
display: grid;
gap: 1rem;
}
@container (min-width: 28rem) {
.card {
grid-template-columns: 9rem 1fr;
align-items: center;
}
}Warum funktioniert das?
Die Karte reagiert auf ihren Wrapper, nicht auf das Fenster. Dadurch funktioniert dieselbe Komponente in Sidebar und Hauptbereich ohne zusätzliche Varianten.
Aktiv-Check
Teste dein Verständnis
Erkennen: Welcher Abschnitt passt?
Welcher Abschnitt passt zu diesen Begriffen?
Transfer
Mini-Projekt: Design-System-Karte
Baue eine Karte mit Cascade Layers, Container Query, Fokusring und reduzierter Bewegung. Prüfe sie in einem schmalen und einem breiten Container.
Selbstcheck
Kann ich das schon?
Hake ab, was du wirklich erklären oder selbst bauen könntest.
Fortschritt
Bereit zum Abschließen?
Markiere die Lektion als abgeschlossen, um XP und Streak zu erhalten.