slides.oddbird.net/cq/cssday/

CSS Containers. What Do They Know?

slides.oddbird.net/cq/cssday/

Miriam Suzanne @ CSS Day
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
Tab Atkins on stage at CSS Day in a previous year
Tab Atkins with a scribbled red speech bubble: no!

Containers don’t know anything.

– Browsers

It’s not gonna happen!

– Browsers

Stop asking!

– Browsers

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

– Browsers, A Paraphrase (circa 2020)

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

Would you like some very flexible boxes instead?

– Browsers

See the Pen flexbox by @miriamsuzanne on CodePen.

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

Intrinsic Web Design

The responsive web keeps evolving…

Headshot of **Jen** Simmons

@jensimmons Jen Simmons

Everything You Know About Web Design Just Changed

Responsive Web Design Forces Everything Fluid

Using % for everything

Intrinsic Web Design Combines Fluid & Fixed

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

Media Queries are Obsolete!*

(* in some situations)

See the Pen flexbox by @miriamsuzanne on CodePen.

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

  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

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.

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

CQ Fact Check: ✅ Possible on The Web

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

Every box has An Intrinsic Size

defined by content

Some boxes have An Extrinsic Size

defined by containers/attributes/etc

😎 Fing Cool Feature

(enables flexbox and grid layouts)

🤯 Makes Queries Recursive

💥 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

See the Pen Rad by @miriamsuzanne on CodePen.

contain: inline-size

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

contain: block-size

We can only Measure The Axis We Contain

contain: size

To query height…

Use size containment With Overflowing Containers

(like the html element)

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 containers Explicitly and Carefully

contain: inline-size layout style;

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

For legacy reasons… No Default Containers 

html {
  container-type: size;
  height: 100%; /* viewport height */
}

@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 { /* ... */ }
}

Why Bother on Root?

Container Queries Measure Actual Styles

Computed Values On the Container Element

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

Progressive Enhancement… 

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

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

There’s a Polyfill

GoogleChromeLabs/container-query-polyfill

Also 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 layout (min-width: 40em) {
  .conditional { /* … */ }
}

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

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.

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
Una Kravets on stage at CSS Day, with a slide that shows combining container queries with the has selector

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.

See the Pen Container Holds Water 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) { … }
Heydon behind the podium at CSS Day, with a slide demonstrating style queries

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

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

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

Other Questions For CSS Containers?

State Queries (???)

??? 

@container state(stuck) { … }
@container state(snapped) { … }
@container state(overflowing) { … }
Una Kravets on stage at CSS Day, with a slide that shows The stuck state query in Chrome Canary
Statue of The Thinker with a scribbled thought bubble asking: do containers know stuff?

Yes.

Things Containers Know:

  1. Their Size (if contained)
  2. Custom Property Values
  3. Relative Values (like em)
  4. Maybe Some States?? (tbd)
The thinker with a red scribbled thought bubble: WTF?!
A beer and laptop on a small table in front of some bikes with a canal in the back, slide visible on the computer says: That's not how I wrote CSS 3 years ago
Same image from previous slide, but covered by a spoiler alert
Yellow shipping container with a red hand-written speech bubble: I'm contained, AMA