CSS Containers. What Do They Know?

slides.oddbird.net/cq/smashingde/

Miriam Suzanne @ SmashingConf Freiburg

September 5, 2023

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?

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

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

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

Same photo,
but with a badly overlaid cursor pointer
and three big scribbled red question marks

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.

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

Truly Two-Dimensional Layouts
Combine Fluid & Fixed
Stages of Squishiness
Nested Contexts
Expand & Contract Content
Media Queries, As Needed

Nested Contexts ???
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 Delorean hovering in Back to the Future

Fifth Element flying taxi next to a flying police cruiser

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

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

For each matched element…
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.

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.

Yes.

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

Things Containers Know:

Their Size (if contained)
Custom Property Values
Relative Values (like em)
Maybe Some States?? (tbd)

Please do query the containers
now actually, thanks!

2011-2022 Selector Queries Element Queries Container Queries

They’re Not Wrong

Web Design Needs to Adapt…

@media min-width

@media prefers-reduced-motion

@media hover

@supports container-type: inline-size

Normal Flow

Intrinsic Sizing

Extrinsic Sizing

😎 Fing Cool Feature

🤯 Makes Queries Recursive

@jensimmons Jen Simmons

Intrinsic Web Design

Responsive Web Design Force Everything Fluid

Intrinsic Web Design Combines Fluid & Fixed

Nested Contexts ???

Expand & Contract Content ???

We’re Not In 2020 Any More

Progressive Enhancement…

There’s a Polyfill

What about the 🧐 infinite layout loops?

Well… yeah

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

CSS Containment

Inline-Only Containment ?!?

Most web layouts… Define Explicit Inline Size

Most web layouts… Keep Implicit Block Size

Inline-axis containment Technically Still A Loop

👍🏼 Inline-Only Containment 🥳

👎🏼 Block-Only Containment

We can only Measure The Axis We Contain

Use inline-size For Most Containers

Use size For Scroll Containers

Also need to Contain Layout & Style

Since… Containment is Invasive

We create Explicit Containers

Also Recommended… Name Your Containers

Any number of names…

Finding Containers

Containers Can’t Self-Query

Always Measuring an Ancestor

Containers can Query Other Containers

Always Measuring an Element

Bonus! Container Queries Measure Actual Styles

Grid Tracks & Flex Sizing?

For legacy reasons… No Default Containers

Simpler Solution…

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

also… Container Query Units

Default unit container The Small Viewport

Style Queries

No Containment Required

All Elements Are Style Containers

Always Queries Direct Parent

Style Queries… Only Custom Properties

Style Queries… Only Custom Properties*

Style Queries… Only Custom Properties*

State Queries (???)

???

Yes.

Things Containers Know:

2011-2022 Selector Queries
Element Queries
Container Queries

`@media` `min-width`

`@media` `prefers-reduced-motion`

`@media` `hover`

`@supports` `container-type: inline-size`

Use `inline-size` For Most Containers

Use `size` For Scroll Containers