CSS Containers. What Do They Know?

slides.oddbird.net/cq/smashingsf/

Miriam Suzanne @ SmashingConf SF

May 24, 2023

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

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

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

Nested grid-item containers
inside the main container,
also use small card layout

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

2010-2020

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

No!

– Browsers

It’s not gonna happen!

– Browsers

Stop asking!

– Browsers

Seriously!

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

Would you like some very flexible boxes instead? You can center them if you want.

– Browsers

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

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

Intrinsic Web Design

The responsive web keeps evolving…

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.

See the Pen flexbox by @miriamsuzanne on CodePen.

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

We’re Not In 2020 Any More

four people sitting in a room
wearing virtual reality headsets
wired to posts next to them,
and all facing different directions

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

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

Phone keyboard
suggesting the current half-written autoc,
autocorrect, and autocomplete

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

2 weeks 2 browser engines
scribbled in red
over a 2 fast 2 furious poster
with three cars trailing neon streaks

There’s a Polyfill

GoogleChromeLabs/container-query-polyfill

@container (min-width: 30em) { /* CQ support */ }

@supports not (container: name) {
  /* no CQ support */
}

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

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

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

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

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

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

What Happened?

Fact Check: ✅ Possible on The Web

Fact Check: 🧐 Infinite layout Loops?

In order to understand… How Container Queries Work

We need to understand… Why They Shouldn’t Work

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

There are too many variables to consider.

– Keith J Grant

Each box has An Intrinsic Size

Intrinsic sizes Defined by Content

😎 Fing Cool Feature

(enables flexbox and grid layouts)

🤯 Layout Loops

💥 Size » Query Change » Resize 💥

For Queries to Work…

We can’t change What We Want To Measure

We can’t style The Container Being Queried

Or anything about The Container’s Context

For Size-Related Queries…

We Need to Turn Off Intrinsic Sizing

(at least partially)

CSS Containment

Size, Layout, Style, Paint, &c

Size containment Removes Intrinsic Sizing

Also need to Contain Layout & Style

See the Pen Understanding containment by @miriamsuzanne on CodePen.

Size containment Is Often Too Restrictive

See the Pen Rad by @miriamsuzanne on CodePen.

`contain: inline-size`

Only contain and Measure the Inline-Size

Maintain the Intrinsic Block-Size

so content has somewhere to flow

See the Pen Containing Size by @miriamsuzanne on CodePen.

Use `size` containment With Overflowing Containers

(like the html element)

`contain: block-size`

Since… Containment is Invasive

Only some Elements Are Containers

(We can’t measure everything)

We create them Explicitly and Carefully

contain: inline-size layout style;

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

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

Recommended… Name Your Containers

html {
  container-type: size;
  container-name: layout root;
}

html {
  container: layout root / size;
}

Names can be Like Classes or IDs

(shared or unique – establish conventions!)

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

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

@container root (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!)

Containers can Query Other Containers

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

Always Measuring an Ancestor

(can’t change what you measure!)

Always Measuring an Element

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.

There are No Default Containers

CSS Reset Document Root Container

html {
  container: layout root / size;
  height: 100%; /* extrinsic size */
}

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

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

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

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

See the Pen Root Size Container by @miriamsuzanne on CodePen.

Why Bother on Root?

Just use @media?

Media Queries Can’t Access Actual Styles

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

also… Container Query Units

cqw | cqh | cqi | cqb | cqmin | cqmax

See the Pen Container Queries, multiple articles by @miriamsuzanne on CodePen.

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

That’s not… All Containers Know!

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 Light/Dark Style Queries by @miriamsuzanne on CodePen.

See the Pen Style query button themes 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

See the Pen Font-style queries by @miriamsuzanne on CodePen.

See the Pen List outdent with style queries by @miriamsuzanne on CodePen.

State Queries (???)

???

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

Yes.

Things Containers Know:

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

Our medium is not done. Our medium is still going through radical changes.

– Jen Simmons, Designing with Grid

2009 @media Queries