slides.oddbird.net/queries-units/tpac22/

Intrinsic CSS with Container Queries & Units

slides.oddbird.net/queries-units/tpac22/

Miriam Suzanne @ TPAC Developer Meetup
The first world wide website & graphic browser
Old IBM desktop
The second browser, a text-only terminal
7 year old Miriam with her hands on her knees

Blissful Ignorance

Web for all. Web on everything.

– W3C Mission Statement

Modern desktops
A zillion different devices of all sizes (original)
Braille interface and headphones
Lineup of smart watches
Google Home, Amazon Echo, and Apple HomePod
A gray office covered in cobwebs, and a gettyImages watermark.

We’re designing unknown content with unknown collaborators on an infinite and unknowable canvas, across operating systems, interfaces, writing-modes, & languages…

– me

2008/2009 @media Queries

Explicitly Measure & Adapt

Ethan Marcotte… Responsive Web Design™️

  • Fluid (%-based) Grids
  • Flexible (%-based) Images
  • Media Queries

Container Queries?

please? if we promise to be good?

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

Never Gonna Happen

– All The Browsers

Fast-forward 2010s »»» 2020s

Flexbox & Grid

  • Box Alignment
  • Viewport Units
  • Intrinsic Sizing
  • Aspect Ratios
  • Min/Max/Clamp
  • &c.
Headshot of Jen Simmons

@jensimmons Jen Simmons

Everything You Know About Web Design Just Changed

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

An outline of nested containers, each with a big red question mark. Sidebar next to larger main area, which has smaller nested grid-items.

2010-2020 🚧 Laying Foundations 🚧

2020 Proposals

  • David Baron: @container
    limited by containment
  • Brian Kardell: switch()
    limited to paint

@Container

CSS Containment

Size, Layout, Style, Paint, &c

Size containment Removes Intrinsic Sizing

See the Pen Rad by @miriamsuzanne on CodePen.

contain: inline-size;

contain: block-size;

Ship it. 🐿

– All the browsers

Step 1… Define Containers

Too complicated 

.container {
  contain: inline-size layout style;
}

More declarative 

.container {
  container-type: inline-size;
}

Some Caveats

  • Inline size not intrinsic
  • Subgrids can’t contribute track sizing
  • Counters contained

Step 2… Query The Containers

There’s no default container… 

html {
  container-type: inline-size;
}
@media (min-width: 40em) {
  .card { /* ... */ }
  h2 { /* ... */ }
}
@container (min-width: 40em) {
  .card { /* ... */ }
  h2 { /* ... */ }
}

Each matched element Queries Nearest Ancestor

with the appropriate container-type

Relative units Resolved By Container

Computed font size

No self-query, Nesting Containers

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

Name Containers 

.sidebar {
  container-name: sidebar layout;
}

Query Named Containers 

@container layout (min-width: 30em) {
  .card { padding: 2em; }
}

Finding Containers

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

Shorthand (Names First) 

.sidebar {
  container: sidebar layout / inline-size;
}

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

See the Pen container query demo with blockquotes by @miriamsuzanne on CodePen.

See the Pen Container Query Blinds v2 by @miriamsuzanne on CodePen.

See the Pen Responsive Icon Demo (Una Kravets) 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 Container Query Bookstore by @miriamsuzanne on CodePen.

Container Query Units

cqw | cqh | cqi | cqb | cqmin | cqmax

Default container The Small Viewport

See the Pen Basic Container Units by @miriamsuzanne on CodePen.

See the Pen Container Units (Scott Kellum) by @miriamsuzanne on CodePen.

😭 It’s Impossible

🥳 It’s Shipping

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

Style Queries 

@container style(--colors: invert) { … }
blockquote, em { font-style: italic; }

@container style(font-style: italic) {
  em { background-color: pink; }
}

Chrome Prototype

Currently only custom properties

See the Pen Style query button themes by @miriamsuzanne on CodePen.

Other Questions for Containers?

State Queries (???) 

@container state(is-stuck) { … }

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

– Jen Simmons, Designing with Grid