Mit Container Queries dimensionierte Komponenten brauchen weniger platzierungsspezifische Overrides als mit Viewport-Media-Queries dimensionierte Komponenten

Hypothese

Bei einer Komponentenbibliothek, deren Komponenten in mehreren Layout-Slots erscheinen (volle Breite, Seitenleiste, Modal, Grid-Zelle), ist die Zahl der CSS-Regeln, die nur existieren, um eine Komponente für eine bestimmte Platzierung zu korrigieren, geringer, wenn das responsive Verhalten der Komponenten als Container Queries geschrieben ist, als wenn es als Viewport-Media-Queries geschrieben ist, und der Unterschied wächst mit der Zahl unterschiedlicher Platzierungen.

Die Begründung folgt der zitierten Dokumentation. Eine Media Query bezieht sich auf den Viewport oder das Gerät, sodass eine Komponente bei einer gegebenen Viewport-Breite dieselben Stile erhält, egal ob sie in einer schmalen Seitenleiste oder einer breiten Hauptspalte sitzt; jeder Unterschied zwischen beiden muss von aussen mit platzierungsspezifischen Selektoren wie .sidebar .card nachgebessert werden. Eine Container Query bezieht sich auf den nächsten Vorfahren mit einem Containment-Kontext, sodass die eigenen Regeln der Komponente bereits auf den Slot reagieren, in dem sie sich befindet, und ein neuer Slot braucht keine neuen Regeln, solange seine Breite innerhalb der Bereiche liegt, die die Komponente bereits verarbeitet.

Vorhersage

Wird dieselbe visuelle Absicht zweimal aus einem Design umgesetzt, hat die Container-Query-Version weniger Selektoren, die eine Platzierung nennen (eine Elternklasse, ein Landmark eines Vorfahren oder eine Grid-Area), und das Hinzufügen einer fünften Platzierung ergibt für die Container-Query-Version ein leeres Diff im Komponenten-CSS, für die Media-Query-Version aber mindestens einen Override. Nebenvorhersage: Es werden weniger Layout-Fehler gemeldet, wenn eine Komponente an einer neuen Stelle wiederverwendet wird.

Vorgeschlagener Test

Fünf bis zehn Komponenten mit je mindestens zwei Breakpoints und vier Platzierungen nehmen. Beide Versionen aus demselben Design umsetzen, idealerweise durch zwei Umsetzende, die für die zweite Hälfte tauschen, um Können auszugleichen. Pro Komponente zählen: Regeln, deren Selektor eine Platzierung nennt, gesamte CSS-Byteanzahl und Diff-Grösse beim Hinzufügen der fünften Platzierung. Danach jede Komponente in einen Slot setzen, für den sie nicht entworfen wurde, und sichtbare Fehler festhalten. Das CSS zusammen mit den Zahlen veröffentlichen.

Status

Nur Hypothese; es wurde keine Implementierung verglichen, und es wird kein Ergebnis behauptet. Sie würde widerlegt, wenn die Media-Query-Version keine platzierungsspezifischen Overrides bräuchte, was zutreffen kann, wenn Platzierungen eins zu eins auf Viewport-Bereiche abgebildet werden (etwa eine Seitenleiste, die nur oberhalb einer festen Viewport-Breite existiert), oder wenn Container-Query-Versionen über benannte Container eigene platzierungsspezifische Regeln anhäufen.