Element Queries im Responsive Webdesign (Webinale)
Kurzbeschreibung
Flexible Websites und Responsive Design haben das Internet nachhaltig verändert und sind im Web längst zum Standard geworden. Das Prinzip dabei ist einfach: Mithilfe von Media Queries können Designer und Entwickler Websites in Abhängigkeit zur Viewport-Größe verändern. Somit lässt sich das Layout perfekt auf die unterschiedlich großen Displays von Smartphone, Tablet und Co. zuschneiden.
Doch je länger Responsive Design existiert und je komplexer und modularer die Websites werden, desto mehr hat sich herausgestellt, dass die Größe des Viewports meist nur dann wichtig ist, wenn man das globale Layout verändern möchte. Für einzelne Komponenten ist der Viewport irrelevant. Der verfügbare Platz für die einzelne Komponente ist entscheidend.
Hier kommen die sog. Element Queries (auch Container Queries) ins Spiel. Mit ihrer Hilfe ist es möglich, Breakpoints für einzelne Komponenten zu definieren. Es sind zahlreiche Einsatzfälle denkbar. Aktuell befindet sich die Technologie in einem frühen Stadium. Doch mithilfe von JavaScript können Element Queries bereits heute praxistauglich eingesetzt werden. In diesem Vortrag lernen Sie die konzeptionellen Hintergründe von Elemente Queries kennen und erfahren anhand zahlreicher Beispiele, wie die Technik praktisch eingesetzt werden kann.
Dozent: Jonas Hellwig
Slides
Wir haben die Slides dieser Session online gestellt.
Die Slides des Vortrags haben wir hier archiviert. Darüber hinaus haben wir dem Thema Element Queries/Container Queries einen eigenen Blog-Beitrag spendiert.