Responsives Komponenten-Design mit CSS Container Queries
Alles ist im Fluss. Modernes Webdesign muss eine scheinbar unendliche Vielfalt an Bildschirmgrößen berücksichtigen. Mit @media Queries können wir Elemente auf der Grundlage von Merkmalen des Browser-Viewports (Bildschirm-Breite etc.) gestalten.
Was aber, wenn wir wiederverwendbare Komponenten erstellen möchten, die sich an ihren Container anpassen? Etwa eine News-Karte, die sich über die gesamte Breite der Webseite erstrecken oder in eine schmale Spalte an der Seite passen kann. Das geht jetzt!
Mit CSS Container Queries können wir responsive, wiederverwendbare Komponenten entwerfen, die sich an den verfügbaren Platz anpassen. Seit dem Release von Firefox 110 wird das Feature nun von allen wichtigen Browsern unterstützt. Das ändert alles! Schauen wir uns an, wie es funktioniert.
Foto: © Pixabay / pexels.com
Die Größe eines Containers abfragen
Dank Container Queries können wir Styles auf Elemente anwenden, die auf der Größe ihres Containers und nicht auf dem Viewport basieren. Das Feature ist im CSS-Modul CSS Containment Module Level 3 definiert:
While media queries provide a method to query aspects of the user agent or device environment that a document is being displayed in (such as viewport dimensions or user preferences), container queries allow testing aspects of elements within the document (such as box dimensions or computed styles).Wir können verschiedene Größenmerkmale von Containern wie width, height oder inline-size abfragen. Die Spezifikation umfasst auch Container Style Queries, die jedoch von den Browsern noch nicht unterstützt werden.
Um eine Komponente auf Basis ihrer Container-Größe zu stylen, müssen wir das übergeordnete Element mit der CSS-Eigenschaft container-type ausweisen. Es wird empfohlen, den Container auch mit container-name zu benennen. Hier ist ein Beispiel:
.news-card {
container-type: inline-size;
container-name: news-card;
}
Ihr könnt den Container-Typ und -Namen auch auf einmal mit der CSS-Kurzform container setzen:
.news-card {
container: news-card / inline-size;
}
Jetzt können wir den Container mit der @container Deklaration abfragen und konditionale Styles definieren. Zum Beispiel, wenn die Breite des Containers unter einem bestimmten Schwellenwert liegt:
@container news-card (max-width: 25rem) {
.card-image {
flex-basis: 100%;
}
}
Demo: Responsive News-Karte
Ich habe eine Demo auf Codepen erstellt, die eine News-Karten-Komponente zeigt. Wenn genügend Platz vorhanden ist, legt die Karte ihren Inhalt horizontal aus. Wenn die Breite des Containers unter einen bestimmten Schwellenwert fällt, wird der Text unter das Bild verschoben.
Weitere Lektüre
Es gibt noch viel mehr über Container Queries zu lernen. Seht euch die folgenden Anleitungen und Beispiele an:
- “CSS container queries are finally here”, by Ahmad Shadeed
- “Early Days of Container Style Queries”, by Geoff Graham
- “Use the Right Container Query Syntax”, by Miriam Suzanne
- “Day 56: container queries”, by Manuel Matuzović
- “Container queries land in stable browsers”, by Una Kravets
Fazit
Ich bin total begeistert von CSS Container Queries! Dabei habe ich bisher kaum an der Oberfläche aller möglichen Anwendungsfälle gekratzt. Mein Ziel ist es, das Feature in mehr und mehr Projekten zu verwenden und mein Verständnis dafür laufend zu verbessern.
Eines ist aus meiner Sicht fix: Container Queries werden die Art und Weise wie wir CSS schreiben nachhaltig verändern. Welche Ideen und Anwendungsfälle habt ihr bereits mit dem Feature umgesetzt?
Erstellt am