slides.oddbird.net/cq/front/

CSS Containers. What Do They Know?

Miriam Suzanne @ Front Conference
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?

2009 @media Queries

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

Nested grid-item containers inside the main container, also use small card layout
A List Apart: Responsive Web Design by Ethan Marcotte (May 25, 2010)
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
Please don't feed the animals hand-painted sign, scribbled over to say: please don't query the containers

Containers don’t know anything.

– Browsers

Stop asking!

– Browsers

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

We’re designing dynamic content with unknown collaborators on an infinite and unknowable canvas, across operating systems, interfaces, writing-modes, & languages…

– me

Every box has An Intrinsic Size

defined by content

Some boxes have An Extrinsic Size

defined by containers/attributes/etc

Photo of Brad Frost slide with two circles, and arrows going both ways between them - labels are replaced with the words 'context' and 'content'

😎 Fing Cool Feature

See the Pen Awesome Editable by @miriamsuzanne on CodePen.

🤯 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 Forces Everything Fluid

2010s – Using % for everything

Intrinsic Web Design Combines Fluid & Fixed

2020s – Using intrinsic size of elements

  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.
cat in a box, thinking 'OMG I have so many questions for this damn box'

We’re Not In 2020 Any More

This is The Future Now

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
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

Photo of Brad Frost slide with two circles, and arrows going both ways between them - labels are replaced with the words 'context' and 'content'
Photo with two circles, and arrow from 'context' overlapping 'content' circle

CSS Containment

contain: size | layout | style | paint;

Size containment Removes Intrinsic Sizing

See the Pen Rad by @miriamsuzanne on CodePen.

👍🏼 Inline-Only Containment

👎🏼 Block-Only Containment

We can only Measure The Axis We Contain

Use size containers With Overflowing Containers

See the Pen Containing Size by @miriamsuzanne on CodePen.

Also need to Contain Layout & Style

See the Pen Understanding containment by @miriamsuzanne on CodePen.

Since… Containment is Invasive

We create Explicit Containers

contain: inline-size layout style;

container-type: inline-size;
.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 

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

Names can be Like Classes or IDs

(shared or unique – establish conventions!)

@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

Bonus! Computed Values On the Container Element

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 Container Query Bookstore by @miriamsuzanne on CodePen.

For legacy reasons… No Default Containers 

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

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

also… Container Query Units

cqw | cqh | cqi | cqb | cqmin | cqmax

See the Pen Basic Container Units by @miriamsuzanne on CodePen.

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

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

See the Pen Space Facts - CQ Demo with :has() (in grid) 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.

Yellow shipping container with a red hand-written speech bubble: I know other stuff too

Style Queries 

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

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

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

Style Queries… Only Custom Properties

Style Queries… Only Custom Properties*

* for now

Style Queries… Only Custom Properties*

* for now **
** but maybe forever?

No Containment Required

All Elements Are Style Containers

Always Queries Direct Parent

Unless you query a specific container-name

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 & Computed Values by @miriamsuzanne on CodePen.

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

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!