Vergessen wir die Container-Abfragen nicht

Container-Abfragen stehen immer ganz oben auf der Liste der gewünschten Verbesserungen für CSS. Die allgemeine Meinung ist, dass wir, wenn wir Container-Abfragen hätten, nicht mehr so viele globale Media-Abfragen basierend auf der Seitengröße schreiben müssten. Das liegt daran, dass wir *eigentlich* einen stärker eingegrenzten Container steuern wollen und Media-Abfragen dafür nur deshalb verwenden, weil es das beste Werkzeug ist, das wir in CSS haben. Das glaube ich absolut.

Es gibt auch eine andere Meinung, die gelegentlich auftaucht, und zwar etwas in der Art von: „Ihr Entwickler denkt, ihr braucht Container-Abfragen, aber das tut ihr wirklich nicht.“ Das gefällt mir gar nicht. Es scheint offensichtlich, dass wir damit gute Dinge tun könnten, wenn sie verfügbar wären, nicht zuletzt, indem wir saubereren, portableren und verständlicheren Code schreiben. Alle scheinen sich einig zu sein, dass der Aufbau von UIs aus Komponenten heutzutage der richtige Weg ist, was die Notwendigkeit von Container-Abfragen noch offensichtlicher macht.

Es ist wunderbar, dass es moderne JavaScript-Ideen gibt, die uns heute dabei helfen, sie zu nutzen – aber das bedeutet nicht, dass die Technologie dort bleiben muss. Es macht in CSS viel mehr Sinn.

Hier ist mein Senf von Ende 2019 zum Thema

• Philip Waltons „Responsive Components: a Solution to the Container Queries Problem“ ist ein großartiger Überblick über die Verwendung von JavaScripts ResizeObserver als eine Möglichkeit, das Problem heute zu lösen. Es funktioniert hervorragend und überall. Die Demo-Seite ist die beste, die es gibt, weil sie die Notwendigkeit responsiver Komponenten hervorhebt (obwohl es auch andere dokumentierte Anwendungsfälle gibt). Philip sagt sogar, dass eine reine CSS-Lösung idealer wäre.
• CSS-Verschachtelung hat vor etwa einem Jahr einiges an Begeisterung erfahren. Die Diskussion lässt darauf schließen, dass Verschachtelung plausibel ist. Ich befürworte dies als langjähriger Fan von sinnvoller Sass-Verschachtelung. Es lässt mich fragen, ob die Syntax für Container-Abfragen denselben Ansatz nutzen könnte. Vielleicht sind verschachtelte Abfragen auf den übergeordneten Selektor beschränkt? Oder man stellt dem Media-Statement ein kaufmännisches Und voran, wie es die aktuelle Spezifikation für Nachfahrenselektoren tut?
• Andere vorgeschlagene Syntaxen beinhalten im Allgemeinen die Verwendung eines Doppelpunkts, wie z. B. .container:media(max-width: 400px) { }. Das gefällt mir auch. Ein-Doppelpunkt-Selektoren (Pseudo-Selektoren) sind philosophisch gesehen „wähle das Element unter diesen Bedingungen aus“ – wie :hover, :nth-child usw. – daher ist ein Media-Scope sinnvoll.
• Ich glaube nicht, dass die Syntax der größte Feind dieses Features ist; es ist die Leistung seiner Implementierung. Soweit ich weiß, ist es nicht einmal die Leistung, sondern vielmehr, dass es den gesamten Rendering-Ablauf der Browser stört. Das scheint eine massive Hürde zu sein. Ich möchte es aber trotzdem nicht vergessen. Es gibt viel Innovation im Web, und nur weil heute nicht klar ist, wie es implementiert werden kann, heißt das nicht, dass nicht jemand morgen einen praktischen Weg nach vorne findet.