Seitdem es responsives Webdesign gibt, fragen Entwickler nach der Möglichkeit, DOM-Elemente basierend auf der Ihrer eigentlichen Größe und nicht auf der Größe des Viewports im Browser (mit Hilfe von Media Queries) zu gestalten. In der Tat sind Container Queries (anfangs Element Queries) wahrscheinlich die am häufigsten geforderte CSS-Funktion, die es in Browsern immer noch nicht gibt.
Es gibt bereits viele, viele, viele Beiträge, in denen genau erklärt wird, warum Container-Queries in CSS schwer zu realisieren sind und warum die Browserhersteller zögern, sie zu implementieren. Will man schon jetzt in den Genuss kommen, schafft etwas JavaScript hier Abhilfe:
c51c33e1533e68c3f8fd24633700789f
Das Ganze sieht dann wie folgt aus:
See the Pen by David Vielhuber (@vielhuber) on CodePen.
Über die Attribute breakpoints, selector und style lassen sich die unterschiedlichen Breakpoints, der automatische Selektor sowie die Art der hinzugefügten Klassen definieren. Hat man das Script im Einsatz, kann man die neu generierten Klassen wie folgt ansprechen:
c51c33e1533e68c3f8fd24633700789f
Insbesondere Elemente in Overlays, Popups, Sidebars oder Custom Elements lohnt sich der Einsatz von Container Queries – auch schon jetzt zum Beispiel mit dem obigen Script.