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

Intrinsic CSS with Container Queries & Units

@ Jamstack Conf

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

Ethan Marcotte… Responsive Web Design™️

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

Container Queries?

please? if we promise to be good?

Never Gonna Happen

– All The Browsers

Flexbox & Grid

  • Box Alignment
  • Viewport Units
  • Intrinsic Sizing
  • Aspect Ratios
  • Min/Max/Clamp
  • &c.
  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 ???

2010-2020 🚧 Laying Foundations 🚧

2020 Proposals

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

CSS Containment

Size, Layout, Style, Paint, &c

Size containment Removes Intrinsic Sizing

contain: inline-size;

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

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

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

Grid Tracks & Flex Sizing?

No element to measure…

Container Query Units

cqw | cqh | cqi | cqb | cqmin | cqmax

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

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

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

– Jen Simmons, Designing with Grid