Container Queries gibt es heute noch nicht, aber viele Webentwickler setzen sich in letzter Zeit dafür ein. Zunächst klingt die Idee relativ einfach: Während Media Queries es uns ermöglichen, Stiländerungen basierend auf der Breite des Browsers vorzunehmen, würden Container Queries es uns ermöglichen, Stilaktualisierungen vorzunehmen, wenn sich die Breite des Elternelements eines Elements ändert.
Das ist ein wichtiger Unterschied, der wahrscheinlich eine Menge täglicher Probleme für die meisten Webentwickler lösen würde, insbesondere für diejenigen, die an großen Designsystemen mit Komponenten arbeiten, die ohne Rücksicht auf den umgebenden Kontext verwendet werden sollen.
Zach Leatherman führt uns durch die bisherige Geschichte der Container Queries und wie die Forderungen nach deren Unterstützung begannen.
Container Queries sind eine oft nachgefragte Funktion der Webplattform. Es ist fast schon klischeehaft, sie zu erwähnen, wenn man über Probleme spricht, die wir uns von der Webplattform lösen wünschen. Container Queries würden Webentwicklern maßgeblich dabei helfen, ihre Arbeit besser zu machen, und ihre Nichtverfügbarkeit ist eine enorme Einschränkung bei der Entwicklung von komponentenbasierendem Code für das Web.
Ich habe bei meiner Arbeit an einem großen Designsystem festgestellt, dass Media Queries bei der Erstellung von Komponenten einfach nicht mehr ausreichen, da unser Team häufig die Stile eines Elements ändern muss, basierend auf der Breite des Elternelements. Meine provokante Meinung zu diesem Thema ist daher, dass Container Queries nach CSS Grid das nächste große Puzzleteil für das Webdesign-Layout sind.
Wie Ethan Marcotte vor einiger Zeit zu diesem Thema schrieb:
Nur für mich selbst sprechend: Ich weiß, dass Container Queries meine Designpraxis revolutionieren und Responsive Design besser auf Mobilgeräte, Desktops, Tablets – und was auch immer als Nächstes kommt – vorbereiten würden.