A presentation at Jamstack Conf in in San Francisco, CA, USA by Miriam Suzanne
Intrinsic CSS With Container Queries & Units Miriam Suzanne Jamstack Conf 2022 @mia@front-end.social
»»1989
Line Mode Browser, developed by Nicola Pellow
“Web for all. Web on everything. – W3C Mission Statement
“We’re designing unknown content with unknown collaborators on an infinite and unknowable canvas, across operating systems, interfaces, writing-modes, & languages… —Me 👋
@media Queries 2008/2009
Responsive Web Design™ Ethan Marcotte An evolution of the already-responsive web…
• Fluid Grids (%-based) • Flexible Images (%-based) • Media Queries
Container Queries???!?1?! Please? If we promise to be good?
“No. Never gonna happen. —Browsers
Back To The [Right Now] 2010s » 2020s
• • • • • • Flexbox & Grid Box Alignment Viewport Units Intrinsic Sizing Aspect Ratios Min / Max / Clamp / &c.
Intrinsic Web Design™ Jen Simmons The responsive web keeps evolving…
• • • • • • Truly Two-Dimensional Layouts Combine Fluid & Fixed Stages of Squishiness Nested Contexts Expand & Contract Content Media Queries, As Needed
• • • • • • Truly Two-Dimensional Layouts Combine Fluid & Fixed Stages of Squishiness Nested Contexts Expand & Contract Content Media Queries, As Needed
🚧 Laying Foundations 🚧 2010s » 2020s
2020 Proposals • David Baron: @container • Brian Kardell: switch()
@container
CSS Containment Size, Layout, Style, Paint Avoid internal impacts on external elements…
⚠ Size Containment Removes Intrinsic Sizing
Single-Axis Containment? We need it
contain: inline-size block-size Thanks to Ian Kilpatrick
Containment Gotchas • Inline-size is never intrinsic (content-sized) • Subgrids can’t contribute track sizing • Counters are contained
“Yeah, ok. —Browsers
😭 It’s Impossible
🥳 It’s Shipping
August-September 2022 » Chrome/Edge 105 & Safari 16
Define Containers Elements we want to query
contain: layout size style We can do better (more declarative)
container-type: inline-size normal | size* | inline-size* *Make sure the sizing is extrinsic (block elements stretch by default)
No Default Container We need something to query
html { container-type: inline-size; } Similar to @media, but em/rem queries use actual root font-size
html, main, aside { container-type: inline-size; }
Container Names Optional and unlimited
html { container-type: inline-size; container-name: layout root; } Use names like unique IDs or reusable classes
html { container-name: layout root; } main { container-name: layout content; } .card { container-name: component card; } Use names like unique IDs or reusable classes
html { container: layout root / inline-size; } Name is required in the shorthand, but type is optional
Query Containers Depending on context
@media (min-width: 40em) { .card { /* … / } h2 { / … */ } }
@container (min-width: 40em) { .card { /* … / } h2 { / … */ } }
@container (width > 40em) { .card { /* … / } h2 { / … */ } }
Each Matched Element Queries the Nearest Ancestor With the Necessary Container-Type
Nest Containers Each will query the next one up
Eric Portis (CodePen)
Query Named Containers When it matters
@container card (width > 40em) { h2 { /* … */ } }
Each Matched Element Queries the Nearest Ancestor With the Necessary Container-Type And Container-Name
David Herron (CodePen)
Una Kravets (CodePen)
Jhey Tompkins (CodePen)
⚠ Grid & Flexbox Tracks Don’t Match the Container Size
Web Component :host Containers built in
Max Böck (CodePen)
Container Query Units cqw | cqh | cqi | cqb | cqmin | cqmax
Fallback to Small Viewport When no container is available
h2{ font-size: max(1.25rem, 12cqi - 1rem); } cqi » container query inline
Scott Kellum (CodePen)
Val Head (CodePen)
Firefox is Coming Soon* ffi *my uno cial read of the issue status & recent commits
@supports not (container: name) { /* fallback */ } Test for support
There’s a Polyfill fi GoogleChromeLabs/container-query-poly ll
Container Style Queries?? Work is underway…
@container style(font-style: italic) { em { background: var(—highlight); } }
@container style(—arrow: bottom-right) { .tooltip::after { inset-block-start: 100%; inset-inline-end: 1em; } }
Prototype in Chromium Canary Currently only works with custom properties fl about:// ags » Experimental Web Platform features
More Query Features?? What would you ask a container?
@container state(is-stuck) { /* when position:sticky applies? */ }
@container state(is-snapped) { /* when scroll-snap applies? */ }
“Our medium is not done. Our medium is still going through radical changes. —Jen Simmons
Miriam Suzanne Jamstack Conf 2022 @mia@front-end.social
Container queries & units have a lot to offer as we enter a more content-out era of Intrinsic Web Design, but they also come with some limitations of their own. Join Miriam to learn about how the feature works, how to start using it in production, and what to look forward to as Container Queries continue to evolve.
Here’s what was said about this presentation on social media.
