slides.oddbird.net/cq/pre-cssday/

CSS Containers. What Do They Know?

slides.oddbird.net/cq/pre-cssday/

Miriam Suzanne @ Pre-CSS-Day, CMD Amsterdam
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?

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?

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

And the answer is yes. They do. Container queries have had broad support in all modern browsers for over a year now.

Thanks. Any Questions?

It’s Complicated

Ok, it’s more complicated than that. Mostly developers had a single question, going back years: how big is the box?

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

Browsers knew we were asking, they knew we wanted this feature, and they all gave us the same answer…

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

Web Design Needs to Adapt…

@media min-width

@media prefers-reduced-motion

@media hover

@supports container-type: inline-size

Normal Flow

in a “Block Formatting Context”

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
A box with context pushing in, and content pushing out

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

😎 Fing Cool Features

Making The Web Responsive

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

Same content/context diagram, with scribbled circles and arrows representing the loop of information back and forth, as each one queries the other

  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.
The thinker with a red scribbled thought bubble: how?!

For Container Queries… Some Restrictions Apply

We can’t change The Container Being Queried

Directly or Indirectly

For Size-Related Queries…

Nested boxes diagram with the intrinsic arrows from content scribbled out
Original content/context diagram, with 'content' scribbled out.

CSS Containment

contain: size | layout | style | paint;

See the Pen Rad by @miriamsuzanne on CodePen.

By default, block boxes… Get block-size from Content

(intrinsic)

By default, block boxes… Get inline-size from Context

(extrinsic)

👍🏼 Inline-Size Containment 🥳

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

👎🏼 Block-Size Containment

(too many side effects)

Queries 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

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 */
}

@container (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

  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.

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.

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…

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 reasons… No Default Containers

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

body {
  > * { container: layout / inline-size; }
}

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

Eventually…

cqem, cqrem, cqch, etc…

Eventually…

cqi(container-name)

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

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.

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!