slides.oddbird.net/cq/smashingde/

CSS Containers. What Do They Know?

slides.oddbird.net/cq/smashingde/

Miriam Suzanne @ SmashingConf Freiburg
Smashing Conf banner for Freiburg, The Web - with Topple cat replaced by badly photoshopped medieval cat drawing.
A shipping yard from above, with rows of colorful stacked shipping containers
A single yellow shipping container up close, with the door open, but we can't see in
A handmade wooden box with a missing latch
A grey and white cat in a cardboard box, looking directly at us, kinda grumpy
Statue of The Thinker with a scribbled thought bubble asking: do containers know stuff?
Timeline with media queries around 2010

See the Pen Media vs Container by @miriamsuzanne on CodePen.

A List Apart: Responsive Web Design by Ethan Marcotte (May 25, 2010)
Nested grid-item containers inside the main container, also use small card layout
What about container queries?

See the Pen Media vs Container by @miriamsuzanne on CodePen.

Github page for an Initial demo commit to the ahume/selector-queries repo on July 14, 2011 - showing html for a Responsive Containers Test Page

2011-2022 Selector Queries
Element Queries
Container Queries

State of CSS 2019 survey results for missing features, with container queries at the top (3%), then parent selector, nesting, etc.
same statue of The Thinker with a scribbled thought bubble, but there's browser logos listening in from behind the shrubbery

Containers don’t know anything.

– Browsers

Please don't feed the animals hand-painted sign, scribbled over to say: please don't query the containers

Container queries will never be possible on the web. They would cause infinite layout loops.

– Browsers, A Paraphrase (circa 2020)

They’re Not Wrong

Back to the future flaming tire tracks between Doc and Marty's legs, as they look back in surprise.
The first world wide website & graphic browser
Zoom in on NEXT logo in top right corner of the browser
Old IBM desktop
The second browser, a text-only terminal

Web for all. Web on everything.

– W3C Mission Statement

A zillion different devices of all sizes (original)
Spider man crawling towards you with webs everywhere
InDesign book-cover layout for Riding SideSaddle, my novel in a box
Final novel-in-a-box, Riding SideSaddle
Same photo, but with a badly overlaid cursor pointer and three big scribbled red question marks
Final novel-in-a-box, Riding SideSaddle

The fact we can control a paper page is really a limitation of that medium.

– John Allsopp, 2000

Web Design Needs to Adapt…

@media min-width

@media prefers-reduced-motion

@media hover

@supports container-type: inline-size

Normal Flow

aka “Block Formatting Context”
aka “Block Layout”

A series of nested boxes - one is solid-lined and labeled 'box'
Boxes inside labeled 'content', provide 'implicit' sizing to the box

Intrinsic Sizing

  • auto
  • min-content
  • max-content
  • fit-content
Parent box labeled 'context', and styles from the box itself provide 'explicit' sizing to the box

Extrinsic Sizing

  • Context sizes (available space)
  • width or height set in px, %, em, etc

😎 Fing Cool Feature

🤯 Makes Queries Recursive

💥 Size » Query » Change » Resize 💥

See the Pen flexbox by @miriamsuzanne on CodePen.

See the Pen Grid auto-fit by @miriamsuzanne on CodePen.

Headshot of **Jen** Simmons

@jensimmons Jen Simmons

Everything You Know About Web Design Just Changed

Intrinsic Web Design

The responsive web keeps evolving…

Responsive Web Design Force Everything Fluid

2010s – only extrinsic sizing

Intrinsic Web Design Combines Fluid & Fixed

2020s – Use intrinsic size as well!

  1. Truly Two-Dimensional Layouts
  2. Combine Fluid & Fixed
  3. Stages of Squishiness
  4. Nested Contexts
  5. Expand & Contract Content
  6. Media Queries, As Needed

  1. Nested Contexts ???

  2. Expand & Contract Content ???

An outline of nested containers, each with a big red question mark. Sidebar next to larger main area, which has smaller nested grid-items.

We’re Not In 2020 Any More

We live in the future!

The Jetsons in their cartoon flying car
The Delorean hovering in Back to the Future
Fifth Element flying taxi next to a flying police cruiser
Traffic on a hazy highway at dusk
Mammon, the android from Metropolis, in a chair with wires feeding into her head
Data, the android from Star Trek TNG, sitting at the console and looking back at the camera with golden eyes
CBC News headline: A Google engineer says AI has become sentient. What does that actually mean? by Laura McQuillan
Phone keyboard suggesting the current half-written autoc, autocorrect, and autocomplete
Timeline with container queries around 2022
Image of John Snow from Game of Throwns labeled 'Large Language Models know nothing'
Yellow shipping container with a red hand-written speech bubble: actually, I know stuff
Data on support for the css-container-queries feature across the major browsers from caniuse.com

See the Pen Media vs Container (Live Demo) by @miriamsuzanne on CodePen.

Progressive Enhancement… 

/* explicit fallbacks, rarely needed */
@supports not (container: name) { /* … */ }

There’s a Polyfill

GoogleChromeLabs/container-query-polyfill

The thinker with a red scribbled thought bubble: how?!

What about the 🧐 infinite layout loops?

Well… yeah

(*some restrictions apply)

For Queries to Work…

We can’t change The Container Being Queried

Directly or Indirectly

For Size-Related Queries…

We Need to Turn Off Intrinsic Sizing

Nested boxes diagram with the intrinsic arrows from content scribbled out

CSS Containment

contain: size | layout | style | paint;

See the Pen Rad by @miriamsuzanne on CodePen.

Two circles labeled context and content, with arrows going both ways
Context and content circles, with content scribbled over
Glitchy context circles and arrows covering the whole page
No

Inline-Only Containment ?!?

Most web layouts… Define Explicit Inline Size

e.g. grid systems

Most web layouts… Keep Implicit Block Size

somewhere for the content to go

Inline-axis containment Technically Still A Loop

See the Pen 💥 Inline Containment Error, Auto-sized BFCs effected by floats by @miriamsuzanne on CodePen.

👍🏼 Inline-Only Containment 🥳

(what loop? If you don’t tell anyone, I won’t)

👎🏼 Block-Only Containment

(ok, that’s too many loops)

We can only Measure The Axis We Contain

Use inline-size For Most Containers

Use size For Scroll Containers

See the Pen Containing Size by @miriamsuzanne on CodePen.

Also need to Contain Layout & Style

Since… Containment is Invasive

We create Explicit Containers

contain: inline-size layout style;

container-type: inline-size;

See the Pen Understanding containment by @miriamsuzanne on CodePen.

.element-to-query {
  container-type: inline-size; /* or size */
}

@media (min-width: 40em) {
  .card { /* … */ }
  h2 { /* ... */ }
}

@container (min-width: 40em) {
  .card { /* … */ }
  h2 { /* ... */ }
}

@container (width > 40em) {
  .card { /* … */ }
  h2 { /* ... */ }
}

@container (inline-size > 40em) {
  .card { /* ... */ }
  h2 { /* ... */ }
}

@container (20em > inline-size > 40em) {
  .card { /* ... */ }
  h2 { /* ... */ }
}

Also Recommended… Name Your Containers

Any number of names… 

main {
  container-type: inline-size;
  container-name: layout main;
}

main {
  container: layout main / inline-size;
}

@container layout (min-width: 40em) {
  .conditional { /* … */ }
}

@container main (min-width: 40em) {
  .conditional { /* … */ }
}

Finding Containers

  1. For each matched element…
  2. Find the nearest ancestor that has…
    • Any required container name
    • Any required container types

See the Pen Two container cards, resize by @miriamsuzanne on CodePen.

Containers Can’t Self-Query

(That would introduce loops!)

Always Measuring an Ancestor

(can’t change what you measure!)

Containers can Query Other Containers

See the Pen Enter the 36 Chambers by @miriamsuzanne on CodePen.

Always Measuring an Element

Bonus! Container Queries Measure Actual Styles

See the Pen Size queries, relative/var units by @miriamsuzanne on CodePen.

Grid Tracks & Flex Sizing?

No element to measure…

Three mud turtles on a small log surrounded by water.

See the Pen Flexbox cards, with Container Queries by @miriamsuzanne on CodePen.

See the Pen Space Facts - CQ Demo with :has() (in grid) by @miriamsuzanne on CodePen.

Web Components

See the Pen Container Query Bookstore by @miriamsuzanne on CodePen.

See the Pen Responsive Icon Demo (Una Kravets) by @miriamsuzanne on CodePen.

See the Pen Container Query Blinds v2 by @miriamsuzanne on CodePen.

For legacy reasons… No Default Containers

See the Pen Root container tests by @miriamsuzanne on CodePen.

/* extrinsic size, from the viewport */
html, body { block-size: 100%; }
/* root container */
html { container: root / size; }
/* body as scroller */
body { overflow: auto; }

Simpler Solution…

(without height queries)

body > :is(header, main, footer, aside), {
  container: layout / inline-size;
}

Root Containers, not great… We’re Working On It

also… Container Query Units

cqw | cqh | cqi | cqb | cqmin | cqmax

See the Pen Container Units (Scott Kellum) by @miriamsuzanne on CodePen.

See the Pen Container Query Units - illo by @miriamsuzanne on CodePen.

@keyframes slide {
  0% {translate: calc(0cqi - 100%);}
  100% {translate: calc(100cqi);}
}
off-left (0cqi - 100%) to off-right (100cqi) and left-edge (0cqi) to right-edge (100cqi - 100%)

Default unit container The Small Viewport

On an example phone, the large viewport fills the full screen with all browser chrome hidden - the small viewport fills the remaining space when top and bottom browser chrome are visible
cat in a box, thinking 'OMG I have so many questions for this damn box'
Yellow shipping container with a red hand-written speech bubble: I know other stuff too

Style Queries 

@container style(--colors: invert) { … }

No Containment Required

All Elements Are Style Containers

Always Queries Direct Parent

Unless you query a specific container-name

See the Pen Style query button themes by @miriamsuzanne on CodePen.

See the Pen Light/Dark Style Queries by @miriamsuzanne on CodePen.

See the Pen Web component style query parameters by @miriamsuzanne on CodePen.

See the Pen Queries on pseudo-classes by @miriamsuzanne on CodePen.

See the Pen Style queries test by @miriamsuzanne on CodePen.

See the Pen Style Queries & Computed Values by @miriamsuzanne on CodePen.

Data on support for the css-container-queries-style feature across the major browsers from caniuse.com

Style Queries… Only Custom Properties

Style Queries… Only Custom Properties*

* for now

Style Queries… Only Custom Properties*

* for now **
** but maybe forever?

State Queries (???)

??? 

@container state(stuck) { … }
@container state(snapped) { … }
@container state(overflowing) { … }

See the Pen Sticky Header State Query! by @miriamsuzanne on CodePen.

Statue of The Thinker with a scribbled thought bubble asking: do containers know stuff?

Yes.

Yellow shipping container with a red hand-written speech bubble: I'm contained, AMA

Things Containers Know:

  1. Their Size (if contained)
  2. Custom Property Values
  3. Relative Values (like em)
  4. Maybe Some States?? (tbd)
Please do query the containers now actually, thanks!