Intrinsic CSS with Container Queries & Units

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