slides.oddbird.net/cq/smashingsf/

CSS Containers. What Do They Know?

slides.oddbird.net/cq/smashingsf/

@ SmashingConf SF

2009 @media Queries

2010-2020

Selector Queries
Element Queries
Container Queries

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

  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

Intrinsic Web Design

The responsive web keeps evolving…

  1. Nested Contexts ???

  2. Expand & Contract Content ???

2 weeks 2 browser engines
scribbled in red
over a 2 fast 2 furious poster
with three cars trailing neon streaks
@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 { /* ... */ }
}

Fact Check: 🧐 Infinite layout Loops?

In order to understand… How Container Queries Work

We need to understand… Why They Shouldn’t Work

There are too many variables to consider.

– Keith J Grant

😎 Fing Cool Feature

(enables flexbox and grid layouts)

🤯 Layout Loops

💥 Size » Query Change » Resize 💥

We can’t change What We Want To Measure

We can’t style The Container Being Queried

Or anything about The Container’s Context

We Need to Turn Off Intrinsic Sizing

(at least partially)

CSS Containment

Size, Layout, Style, Paint, &c

Size containment Removes Intrinsic Sizing

Size containment Is Often Too Restrictive

Only contain and Measure the Inline-Size

Maintain the Intrinsic Block-Size

so content has somewhere to flow

Use size containment With Overflowing Containers

(like the html element)

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

  1. For each matched element
  2. Find the nearest ancestor that has…
    • Any required container name
    • Any required container types

Containers Can’t Self-Query

(That would introduce loops!)

Always Measuring an Ancestor

(can’t change what you measure!)

Grid Tracks & Flex Sizing?

No element to measure…

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

Media Queries Can’t Access Actual Styles

also… Container Query Units

cqw | cqh | cqi | cqb | cqmin | cqmax

Default unit container The Small Viewport

Style Queries

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

Always Queries Direct Parent

Unless you query a specific container-name

???

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

Things Containers Know:

  1. Their Size (if contained)
  2. Custom Property Values
  3. Relative Values (like em)
  4. Maybe Some States?? (tbd)

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

– Jen Simmons, Designing with Grid