Container Queries, also die Fähigkeit, Elemente basierend auf Werten eines bestimmten Elements, wie seiner Breite und Höhe, zu gestalten. Wir haben Media Queries, aber diese basieren auf dem Viewport, nicht auf einzelnen Elementen. Es gibt unzählige Anwendungsfälle dafür. Es wurde schon oft gesagt, aber ich sage es noch einmal: Wenn Container Queries existieren würden, *wäre die überwiegende Mehrheit der Media Queries in CSS tatsächlich Container Queries*.
Die Diskussion darüber, wie man das technologisch umsetzen kann, wird interessant. In meinen Augen wäre es ideal, wenn wir diese Fähigkeit direkt in CSS bekommen würden. Das Problem bei dieser Vorgehensweise liegt in der Zirkularität. Nicht einmal in Bezug auf die Möglichkeit, CSS zu schreiben, das ein Szenario auslöst, in dem die Abfrage nicht mehr übereinstimmt, was schon schwierig genug ist, sondern buchstäblich die seit langem bestehende Ein-Pass-Methode, mit der Browser eine Seite rendern, zu ändern.
Das Problem bei Container Queries ist nicht das Finden der perfekten Syntax oder das Überzeugen von irgendjemandem, dass sie benötigt werden, sondern wie Browser funktionieren. https://#/7ZxMczD4ag pic.twitter.com/DeHyR9zRuO
— CSS-Tricks (@Real_CSS_Tricks) 1. Februar 2018
Es gibt viele Ansätze, um dieses Problem zu lösen. Alle basieren natürlich auf JavaScript. Dave Rupert hat einige davon hier zusammengefasst. Sie sind alle ein wenig unterschiedlich.
Mir scheint, die am besten geeignete JavaScript-API dafür ist ResizeObserver. Zum Zeitpunkt des Schreibens ist sie nur in Chrome verfügbar, aber hier ist eine Tabelle, die hoffentlich aktuell bleibt.
Diese Browser-Supportdaten stammen von Caniuse, wo es weitere Details gibt. Eine Zahl bedeutet, dass der Browser die Funktion ab dieser Version unterstützt.
Desktop
| Chrome | Firefox | IE | Edge | Safari |
|---|---|---|---|---|
| 64 | 69 | Nein | 79 | 13.1 |
Mobil / Tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 127 | 127 | 127 | 13.4-13.7 |
Das war eine ganze Menge Worte, um die Tatsache einzuleiten, dass Philip Walton gerade einen verdammt guten Artikel über genau das geschrieben hat. Der Kernpunkt ist, dass man ResizeObserver verwendet, um Klassen auf Elemente anzuwenden, und diese dann mit diesen Klassen gestaltet. Er kommt zu dem Schluss:
Die in diesem Artikel beschriebene Strategie
- Wird heute auf jeder Website funktionieren
- Ist einfach zu implementieren (kopier- und einfügbar)
- Ist genauso performant wie eine CSS-basierte Lösung
- Benötigt keine speziellen Bibliotheken, Frameworks oder Build-Tools.
- Nutzt progressive enhancement, sodass Benutzer auf Browsern, denen die erforderlichen APIs fehlen oder bei denen JavaScript deaktiviert ist, die Seite trotzdem nutzen können.
Die Browserunterstützung für ResizeObserver ist ein wenig beängstigend, aber es ist eine so schöne API, dass ich eine breitere Unterstützung früher als später erwarte.