Container queries will never be possible on the web. They would cause infinite layout loops. – Browsers, A Paraphrase (circa 2020)
Truly Two-Dimensional Layouts Combine Fluid & Fixed Stages of Squishiness Nested Contexts Expand & Contract Content Media Queries, As Needed
@container (min-width: 30em) { /* CQ support */ }@supports not (container: name) { /* no CQ support */}
@container layout (min-width: 40em) { .conditional { /* … */ }}@container root (min-width: 40em) { .conditional { /* … */ }}
Finding Containers For each matched element… Find the nearest ancestor that has… Any required container name Any required container types
??? @container state(is-stuck) { … }@container state(is-snapped) { … }@container state(is-overflowing) { … }
Things Containers Know: Their Size (if contained) Custom Property Values Relative Values (like em) Maybe Some States?? (tbd)
Our medium is not done. Our medium is still going through radical changes. – Jen Simmons, Designing with Grid