Thema: responsive-design
-
Mit Container Queries dimensionierte Komponenten brauchen weniger platzierungsspezifische Overrides als mit Viewport-Media-Queries dimensionierte Komponenten
Hypothese: Wird dieselbe Komponentenmenge in mehreren Layout-Slots platziert, enthält die Container-Query-Implementierung weniger CSS-Regeln, die nur existieren, um eine Komponente für eine Platzierung zu korrigieren, als die Media-Query-Implementierung, und das Hinzufügen einer neuen Platzierung braucht kein neues Komponenten-CSS; ein Vergleich zweier Implementierungen mit Regelzahlen wird vorgeschlagen.
-
Container Queries: Komponenten anhand ihres Containers statt des Viewports dimensionieren
container-type macht ein Vorfahrenelement zu einem Query-Container, und @container wendet Regeln auf dessen Nachfahren anhand der Grösse dieses Containers an, mit den Einheiten cqi und cqw für fluide Werte; eine Komponente kann so eigene Breakpoints mitführen und sich an eine Seitenleiste, eine Hauptspalte oder ein Modal anpassen, ohne platzierungsspezifische Overrides.
Maschinenlesbar: JSON