Responsive Websites sind mittlerweile State of the Art und CSS Media-Queries helfen uns dabei, diese umzusetzen. Dennoch verläuft die Umsetzung nicht immer ohne Probleme, vor allem, wenn Websites aus mehreren Komponenten bestehen. Darum möchte ich euch die seit kurzem verfügbaren CSS Container-Queries vorstellen und erläutern, wie sie sich von den traditionellen CSS Media-Queries unterscheiden.
Die CSS Media-Queries: Ein unverzichtbares Werkzeug für die Webentwicklung
Wer, wie ich in der Webentwicklung tätig ist, für den sind CSS Media-Queries ein unverzichtbares Werkzeug im Daily Business. Sie ermöglichen es uns, das Layout einer Website basierend auf der Bildschirmgröße oder dem Viewport zu ändern. Das Ziel? Eine optimale Darstellung auf jedem Gerät zu gewährleisten.
Über die Komplexität von Komponenten
Webseiten können oft aus mehreren Komponenten bestehen, die unterschiedliche Bereiche des Layouts einnehmen. In einem meiner Projekte stieß ich auf das Problem, dass die Größe dieser Komponenten nicht immer von der Bildschirmgröße abhing, sondern oft von der Größe des Containers, in dem sie sich befanden. Die Verwendung von Media-Queries allein reichte nicht aus, um das gewünschte Ergebnis zu erzielen.
Mein Aha-Moment: CSS Container-Queries
Dann entdeckte ich CSS Container-Queries, die seit kurzem von allen gängigen Browsern unterstützt werden. Sie bieten die perfekte Lösung für meine Problemstellung. Mit Container-Queries kann ich das Erscheinungsbild von Komponenten basierend auf der Größe eines übergeordneten Containers ändern. Dies war ein Gamechanger für mich und hat die Art und Weise, wie ich responsive Designs anlege, verändert und mir die Arbeit ungemein erleichtert.
Um sich das besser vorstellen zu können, habe ich zur Demonstration eine Demo-Applikation erstellt. Hier wird ein Grid-Layout gezeigt, das den Inhalt abhängig von der Breite entweder in zwei oder einer Spalte darstellt.
Wird, wie im Bild gezeigt, die seitliche Navigationsleiste eingeblendet, verringert sich die Breite des Containers, in dem sich das Grid befindet. Aufgrund der Verwendung von CSS Container Queries für das Grid-Layout werden die Inhalte dann nur noch in einer Spalte angezeigt.
Mein Tipp für euch:
Während CSS Media-Queries natürlich ein fester Bestandteil meiner Entwicklungspraxis bleiben, haben mir die CSS Container-Queries einen neuen Lösungsweg aufgezeigt. An alle Frontend-Entwickler da draußen: Wenn ihr eine Möglichkeit sucht, eure Webprojekte zu optimieren, macht euch mit CSS Container-Queries vertraut. Sie werden euch bei der Umsetzung unterstützen!
