Container Query Diskussion

Derzeit haben wir die Möglichkeit, CSS zu schreiben, das nur angewendet wird, wenn das Browserfenster selbst bestimmte Breiten oder Höhen hat. Sprich, Breakpoints. Super nützlich. Was wir (nativ) nicht haben, ist die Möglichkeit, bedingtes CSS basierend auf den Eigenschaften eines bestimmten Elements (oder "Containers") zu schreiben.

Es ist fast 2 Jahre her, seit die RICG beschlossen hat, sich dieser Sache anzunehmen. Ich bin mir nicht ganz sicher, wie der Status dort ist. Es scheint etwas auf Eis zu liegen, aber das bedeutet nicht, dass die gesamte Diskussion pausiert.

Was ich höre und was sich auch widerspiegelt, ist der Refrain unter Frontend-Entwicklern: Wenn Container Queries verfügbar wären, wären 90 % der Media Queries, die ich schreibe, Container Queries. Die Überlegung ist, dass man normalerweise versucht, die Eigenschaften eines bestimmten Elements anzupassen, die an etwas stärker eingegrenzt als das gesamte Browserfenster gebunden sind.

Ethan Marcotte schrieb kürzlich

Ich möchte nicht andeuten, dass die technischen Herausforderungen bei der Spezifikation von Container Queries irgendwie einfach sind. Aber eine gewisse Bewegung wäre der gesamten Responsive-Design-Community zutiefst willkommen. Nur für mich selbst gesprochen, weiß ich, 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.

Hört, hört.

Er wies auf einige seiner eigenen Arbeiten hin, bei denen Module in extrem unterschiedlichen Situationen sind, die nicht direkt mit dem Viewport zusammenhängen, sondern direkter mit einem übergeordneten Container.

Aber jetzt, in einer **verrückten Überraschungswendung**, gibt es eine gute Menge an "Hmmmm, vielleicht brauchen wir diese nicht so sehr, wie wir denken".

Zum Beispiel fand Dave Rupert beim Spielen mit CSS Grid Layout, dass er einige Media Queries ganz weglassen konnte.

Ich habe ein ca. 50 Zeilen umfassendes Flexbox-Grid zu nur ca. 5 Zeilen CSS mit CSS Grid refaktoriert. … Das Beste daran ist, wir brauchen keine Media Queries! Das spart eine Menge Code. In diesem speziellen Projekt haben wir tatsächlich drei Flexbox-Grids mit leicht unterschiedlichen Breakpoints. Das Schlüsselwort auto-fill generiert Spalten automatisch, wenn Platz vorhanden ist.

Siehe den Pen Flexbox Grid vs. CSS Grid von Dave Rupert (@davatron5000) auf CodePen.

Flexbox kann mit seiner Fähigkeit zu wrappen, seiner Fähigkeit, anzuzeigen, ob es wachsen kann oder nicht, und wie stark und mit welchen Grenzen, wirklich ausgefeilte Tanzschritte machen. Das gibt uns viel Kontrolle ohne explizite Media Queries.

Grid gibt uns mit Dingen wie Auto-Layout, minmax() und Schlüsselwörtern wie min-content und auto-fill noch mehr Werkzeuge. Die Tatsache, dass man Flex-Container und Grid-Container beliebig verschachteln kann, eröffnet mächtige Möglichkeiten.

Zum Beispiel kann man sehen, wie Jonathan Snook herumexperimentiert (der selbst zugibt, dass er gerade erst anfängt, diese Art von Layouts zu verstehen) und dabei viel Erfolg bei der Steuerung von Modulen hat, die Container-Query-ähnlich sind.

Paul Robert Lloyd stellt explizit die Notwendigkeit von Container Queries in Frage.

Meiner Meinung nach scheinen Container Queries die Antwort von gestern auf die Probleme von heute zu sein. Ich würde es vorziehen, wenn wir die großartigen neuen Werkzeuge, die wir haben, nutzen und eine Zukunft umarmen, die endlich da ist.

Auch das Nachbauen von Ethans Beispiel mit nur einer seitenlayout-beeinflussenden Media Query

Siehe den Pen Rebuilding The Toast’s Recirculation Module von Paul Lloyd (@paulrobertlloyd) auf CodePen.

Jeremy Keith füllt die Rolle des "Baby Bär" aus.

… dies ist ein guter, gut begründeter Beitrag dazu, warum Container Queries möglicherweise nicht die Allheilmittel für unsere Responsive-Design-Probleme sind. Die Sache ist, ich glaube nicht, dass Container Queries versuchen, eine allumfassende Lösung zu sein, sondern eher eine sehr nützliche Lösung für eine bestimmte Klasse von Problemen.

Daher sehe ich Container Queries nicht wirklich im Wettbewerb mit z. B. Grid-Layout (nicht mehr als Grid-Layout mit Flexbox im Wettbewerb steht), sondern eher als ein weiteres Werkzeug, das wirklich nützlich wäre, in unserem Arsenal zu haben.

Selbst Container Queries können natürlich nicht alle RWD-Probleme lösen. Wie Paul sagte.

Der letzte Grund, warum ich die Notwendigkeit von Container Queries in Frage stelle, ist, dass eine Layout-Änderung manchmal auch eine Verhaltensänderung erfordert. Wenn die Erreichung dessen eine Umstrukturierung des DOM beinhaltet, tauschen wir im Grunde eine Komponente gegen eine andere aus.

Also ja, neue Layout-Werkzeuge könnten uns in vielen Situationen von der Notwendigkeit von Container Queries **speziell für Layout-Änderungen** retten. Aber Layout ist nicht das Einzige, was sich an einem Element je nach Containersituation ändern muss. Ethan antwortet.

Abhängig von der Platzierung, Höhe und Breite eines Moduls möchte ich möglicherweise verschiedene Aspekte seines Designs ändern. Diese Änderungen würden Folgendes umfassen, sind aber nicht darauf beschränkt:

1. Visuelles Gewicht. Abhängig davon, wo das Modul positioniert ist, möchte ich oft ändern, wie visuell präsent es ist. Dies kann das Ändern seiner Farbe, seiner Hintergrundfarbe oder der Größe einzelner Elemente darin beinhalten, alles abhängig vom für das Modul zugewiesenen Platz.
2. Typografie. In Bezug auf den letzten Punkt muss ich häufig die Typografie eines Elements ändern, **basierend auf der Größe seines Containers**. Grid Layout und Flexbox sind hier leider keine Hilfe; und so sehr ich flexible Typografie liebe – Trent kann mir hier beipflichten – die Hilfsmittel, mit denen wir dort arbeiten, sind immer noch sehr auf den Viewport fokussiert.
3. Inhaltshierarchie. Ich muss oft die Priorität eines Elements ändern, abhängig von der Größe seines Containers. Vielleicht werde ich bedingt ein Element höher (oder niedriger) positionieren, um es je nach Design sichtbarer (oder weniger sichtbar) zu machen. In einem flexibleren Layout möchte ich vielleicht die order eines bestimmten Elements ändern oder vielleicht die flex-direction des Moduls ändern – und wieder, alles basierend auf den Abmessungen des Containers.

Brad Frost macht ein einfaches, logisches Argument.

… ein Mechanismus, der sagt „wenn diese Komponente in einem Container lebt, der mindestens X breit ist, dann nimm diese Stiländerungen vor“ scheint sinnvoll.

Es ist ein bisschen wie responsive Bilder. Man kann viel mit srcset und sizes machen, aber es gibt auch <picture>, wenn man ganz explizit darüber sein muss, wie man sich verhält.

Persönlich würde ich gerne etwa 100 verschiedene Anwendungsfälle ausgearbeitet sehen. Wenn sich herausstellt, dass einige davon ohne Container Queries erledigt werden können, großartig, aber es scheint mir immer noch sehr wahrscheinlich, dass es sehr praktisch wäre, Container Queries zur Verfügung zu haben.