Minimale Ansätze zum Faken von Container Queries

Es klingt immer wahrscheinlicher, dass wir tatsächlich echte Container Queries erhalten werden. Google prototypisiert eine Syntaxidee von David Baron, die von Miriam Suzanne verfeinert wurde. Anscheinend wurde bereits mit der Prototypisierung einer switch()-Syntax begonnen, die wie Container Queries für Werte funktioniert. Selbst jetzt gibt es Dinge wie die Raven-Technik, die Container-Query-ähnliche Werte liefern kann. Diese Dinge werden sich mit der Zeit entwickeln.

Wenn Sie heute Lösungen benötigen, beinhalten die meisten davon JavaScript, das beobachtet, was gerade passiert (d. h. die Containerbreite) und Ihnen dann eine Art Styling-Hooks (z. B. Klassen) zur Verfügung stellt. Hier ist ein kurzer Überblick über die Landschaft der „minimalen Ansätze“.

• Philip Walton zeigt, wie man das selbst erstellt mit ResizeObserver. Beobachtet die Größe, wendet Klassen für Styling-Hooks an.
• Heydon Pickering hat eine <watched-box> Webkomponente, die ResizeObserver nutzt. Beobachtet die Größe, wendet Klassen für Styling-Hooks an. (Siehe Kombination mit resizeasaurus.)
• Scott Jehl hat eine <c-q> Webkomponente erstellt, die ResizeObserver nutzt. Beobachtet die Größe, wendet Datenattribute für Styling-Hooks an.
• Eric Portis hat conditional-classes erstellt, das ResizeObserver und eine clevere (und gültige) Syntax mit CSS-Custom-Properties nutzt, die letztendlich Klassen für Styling-Hooks anwendet.

Es gibt auch Tommy Hodgins' EQCSS, das Container Queries (und anderes) implementiert, indem es Ihren CSS-Code nach der erfundenen Syntax durchsucht, die diese ausgefallenen Dinge tut. Ich würde es nicht wirklich als minimalistisch bezeichnen und es macht mir leicht Unbehagen, ungültige CSS-Syntax auszuliefern, aber es sieht robust aus.