slides.oddbird.net/cq/web-directions/

CSS Containers. What Do They Know?

slides.oddbird.net/cq/web-directions/

Miriam Suzanne @ Web Directions Dev Summit

A shipping yard from above, with rows of colorful stacked shipping containers

Containers…

A handmade wooden box with a missing latch

Do they know things?

A grey and white cat in a cardboard box, looking directly at us, kinda grumpy

What are they hiding in there?

The cat image is split and duplicated so that it will line up across two screens, a scribbled note asks you to ignore the gap between the images
Statue of The Thinker with a scribbled thought bubble asking: do containers know stuff?

As long as I can remember, developers have had questions for containers. What do they know? Do they know stuff?

A List Apart: Responsive Web Design by Ethan Marcotte (May 25, 2010)

In 2010 we got Media Queries, the heart of Responsive Web Design

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

Letting us measure the ‘viewport’ that our page is rendered in – and them adjust our designs based on that. That’s pretty great, until we start adjusting our designs in more complex ways.

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

So right away developers were asking to measure (or query) not just the viewport, but other elements on the page.

2011-2022 Selector Queries
Element Queries
Container Queries

There have been multiple approaches to this over the years, using a variety of names…

State of CSS 2019 survey results for missing features, with container queries at the top (3%), then parent selector, nesting, etc.

And it became one of the most requested features in CSS.

same statue of The Thinker with a scribbled thought bubble, but there's browser logos listening in from behind the shrubbery

The browsers heard us asking, and all responded in unison!

NO.

– The Browsers

Not Ever.

– The Browsers

Stop Asking.

– The 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.

– The Browsers

Ape from the opening of 2001 standing over an animal skeleton, and waving a bone

But that was the past!

Spaceship in space - USS Enterprise, NCC 1701-D - from Star Trek, The Next Generation

And we live in the future! Sorry, not this future.

Screenshot of Stanford SFI article

We get a global rise in authoritarianism. Sorry, I used to have a joke there about flying cars and spicy auto complete, but… I don’t know.

Data, the android from Star Trek TNG, sitting at the console and looking back at the camera with golden eyes

I’m feeling sad about our industry obsession with fancy new technology, without seriously considering how our algorithms will be used by corporations or governments to do large-scale harm.

The Web Directions logo

What direction are we taking the web? Is it a direction that helps real people, or only the bottom line?

Image of John Snow from Game of Throwns labeled 'Large Language Models know nothing'

Large language models don’t know anything,

Yellow shipping container with a red hand-written speech bubble: actually, I know stuff

But containers do!

Image of John Snow from Game of Throwns labeled 'Large Language Models know nothing'

Large language models don’t know anything,

Phil Nash in front of a slide showing the 'thought process' of an AI
Phil's slide is badly edited to say LLM's don't know anything
Shivay Lamba added on top with his slide of John Snow added into Phils edited slide
Mia's disgusted face from an earlier demo duplicated and split so it hopefully forms a single image across two screens.

Container Queries

See support data on the Web Features Explorer

Container Queries! They’ve been supported in all major browsers for almost 2 years now!

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

/* create some containers */
header, nav, main, aside, footer, section {
  container-type: inline-size;
}
/* query those containers */
@container (width > 30em) {
  .card { /* style things inside them */ }
}

Thanks. Any Questions?

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

So how did we get here?

What about those Infinite Layout Loops??!

In order to understand… Why Container Queries Work

We need to understand… Why They Shouldn’t Work

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
Various home 'smart' speakers
Braille interface and headphones
Spider man crawling towards you with webs everywhere
InDesign book-cover layout
Published book
Published book with badly super-imposed hand-pointer cursor and scribbled word click!
Published book

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

– John Allsopp, 2000

We're Not Alone (in big block letters, in space)
  • We’re not alone here
  • We’re part of an ecosystem
  • Our decisions impact other people
  • And on the web, we don’t get final say
Same We're Not Alone, with browser logos on top
  • We’re collaborating with browsers
Same We're Not Alone, with browser logos and a guy in construction clothes carrying a laptop
  • Also the people who interact with our sites
  • (super cute in their handy tool belts)
  • On their chosen devices
  • (with varying capabilities)
  • And we’re also collaborating with…
We're Not Alone, with browser logos, a guy in construction clothes carrying a laptop, and ET
  • aliens 👽
  • Maybe, who knows?

Web Designs Need to Adapt…

@media min-width

@media prefers-reduced-motion

@media hover

@supports container-type: inline-size

Graphic design of unknown content with unknown collaborators, on an infinite and unknowable canvas, across operating systems, interfaces, languages, and writing modes…

– me

  • (slide)
  • It’s absurd

Web for all. Web on everything.

– W3C Mission Statement

So, if this is what we want, a web for all - on everything

Technology is Political

This is a political vision for the future of the web! A vision that’s built into HTML and CSS from the start! Because tech is always political!

So now, Somehow we have to fit all this content – more and more content all the time –

A zillion different devices of all sizes (original)

Onto any screen (or lack of screen) that shows up.

A box with context pushing in, and content pushing out

And everything is CSS is based on this tension, content pushing out, and context pushing in

An outer box is labeled extrinsic size (imposed from outside), and the overflowing text inside says intrinsic size (from the content)

A negotiation between Intrinsic and extrinsic sizes – the content and the container

Extrinsic Sizing

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

Intrinsic Sizing

  • auto
  • min-content
  • max-content
  • fit-content

Flow is Very Cool, Actually

Makes The Web Responsive

See the Pen CSS is Rad by @miriamsuzanne on CodePen.

See the Pen flexbox by @miriamsuzanne on CodePen.

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

Headshot of Intrinsic Web Design

Jen Simmons Intrinsic Web Design

Everything You Know About Web Design Just Changed

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.
A box with context pushing in, and content pushing out
Same content/context diagram, with scribbled circles and arrows representing the loop of information back and forth, as each one queries the other

Well there’s your Infinite Layout Loop

Our queries can’t change The Container Being Queried

Directly or Indirectly

For Size-Related Queries…

Original content/context diagram, with 'content' scribbled out.

CSS Containment

contain: size | layout | style | paint

See the Pen Rad by @miriamsuzanne on CodePen.

See the Pen Inline/Block Intrinsic Sizing by @miriamsuzanne on CodePen.

Let’s take a closer look at intrinsic sizing…

For Block Boxes… Only The block-size is Intrinsic

(from content)

For Block Boxes… The inline-size is Already Extrinsic

(from context)

⁉️ Inline-Size Containment ⁉️

See the Pen Intrinsic Sizes & Containment by @miriamsuzanne on CodePen.

👍🏼 Inline-Size Containment 🥳

👎🏼 Block-Size Containment

(too many side effects)

👍🏼 Inline-Size Containment
👍🏼 Size Containment

(both axis)

Also need to Contain Layout* & Style

See the Pen Understanding containment by @miriamsuzanne on CodePen.

contain: inline-size layout style;

container-type: inline-size;

We can only Measure The Axis We Contain

We usually only Measure The Inline Axis

(anyway. so there. we don’t even care about your silly block axis, you nerd-faced nerd. leave us alone.)

Use inline-size For Most Containers

But size For Scrolling Containers

See the Pen Containing Size by @miriamsuzanne on CodePen.

For reasons… No Default Containers

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

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

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 { /* … */ }
}
@container layout {
  .conditional { /* … */ }
}

@container main {
  .conditional { /* … */ }
}

Finding Containers

  1. For each matched element…
  2. Find the nearest ancestor element with…
    • Required container name
    • Required container type(s)

No self-query 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.

See the Pen Responsive Icon Demo (Una Kravets) 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.

See the Pen Calc in container queries by @miriamsuzanne on CodePen.

Grid Tracks & Flex Sizing?

No element to measure…

A thick pink boarder around the element and then various smaller lines on both axis creating a grid of columns and rows
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.

also… Container Query Units

cqw | cqh | cqi | cqb | cqmin | cqmax

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

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

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

Eventually…

5cqem, 5cqch, etc…

Eventually…

5cqi(container-name)

cat and speach bubble are again split and duplicated to center the image across two screens
Yellow shipping container with a red hand-written speech bubble: I know other stuff too (split and duplicated for two screens)

Style Queries 

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

Style Queries… Only Custom Properties

Style Queries… Only Custom Properties*

* for now

Style Queries… Only Custom Properties*

* for now **
** but maybe forever?

Container Style Queries

See support data on the Web Features Explorer

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 List outdent with style queries by @miriamsuzanne on CodePen.

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

.ಠ_ಠ {
  --（╯°□°）╯: ︵┻━┻;
} is valid CSS.

– Tab Atkins, @tabatkins

See the Pen Table Flip Style Query by @miriamsuzanne on CodePen.

State Queries (???)

??? 

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

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

Mandy Michael in front of a slide about responsive images and the 'sizes' attribute

Sizes auto

Mandy Michael in front of a slide about lazy loading images
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!