Container Queries & The Future of CSS

slides.oddbird.net/css-next/camosun/

Miriam Suzanne @ Camosun College

March 14, 2023

sass
w3c

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

The second browser, a text-only terminal

Web for all. Web on everything.

– W3C Mission Statement

A zillion different devices of all sizes (original)

Google Home, Amazon Echo, and Apple HomePod

A gray office covered in cobwebs,
and a Getty Images watermark.

Indiana Jones
covered in cobwebs,
looking frustrated.

It is required that HTML be a common language between all platforms…

– WWW Project

…This implies no device-specific markup, or anything which requires control over fonts or colors.

– WWW Project

Never Gonna Happen

– Sir Tim

@mia@front-end.social

Miriam Suzanne

Not a Lack of Design

A lack of Design Control

InDesign book-cover layout
for Riding SideSaddle,
my novel in a box

Same photo,
but with a badly overlaid cursor pointer
and three big scribbled red question marks

The fact we can control a paper page is really a limitation of that medium.

– John Allsopp, 2000

The Web Should Adapt…

`@media` `min-width`

`@media` `prefers-reduced-motion`

`@media` `hover`

`@supports` `container-type: inline-size`

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

– me

1993-1994 w3.org/Style/History/

Cascading HTML style sheets -- a proposal,
Håkon W Lie, 10 Oct 1994

The user/browser specifies initial preferences and hands the remaining influence over to the document [authors].

– Håkon Lie

Provide hints that the browser may or may not use.

– Håkon Lie

CSS Declarations

property: value;

`color``:` blue`;`

<button style='color: blue'>…</button>
<button style='color: blue'>…</button>
<button style='color: blue'>…</button>
<button style='color: blue'>…</button>
<button style='color: blue'>…</button>

<button>…</button>
<button>…</button>
<button>…</button>

button { color: violet; }

<link rel="stylesheet" href="so-many-hints.css">
<style>...</style>

An ordered list (cascade) of style sheets. Referenced from the same document.

– Håkon Lie

💥🙈⁉️💥

<button style='color: blue'>…</button>

button { color: violet; }

Multiple or Unknown ⁉️

color: teal;
color: violet;
color: oklch(79.269% 0.171 70.67);

On every html element
For every css property
We need exactly one value

Rules for… Cascading filters out
Inheritance fills in

Mechanical coin sorter on a table,
with a ramp at the top
and a small-to-large series of slots

Same coin sorter,
with all slots crossed off
except for the largest one with coins in it,
and an arrow pointing at those coins
that says 'move on'

Origin & Importance
Selectors & Specificity
Cascade Layers
Scoped Styles
Container Queries

Origin… Who Requested The Style?

The user/browser specifies initial preferences…

– Håkon Lie

🖥 User Agent Styles

aka ‘browser defaults’

body { margin: 8px; }
a:link { color: blue; }
div, section, article, p, ol, ul /* etc */ {
  display: block;
}
h1, h2, h3, h4 /* etc */ {
  font-weight: bold;
  font-size: something big I dunno;
}

One big block of text
with no white-space
or line breaks

👥 User Styles

Establish desired preferences

Language and appearance preferences in Firefox
include light/dark mode,
colors, fonts, and zoom level

🎨 Author Styles

Cascade 🗺 Origins

🖥 User Agent Defaults (applied first)
👥 User Preferences (override defaults)
🎨 Author Styles (so powerful)

Darth Vader
choking a rebel soldier
as storm troopers watch

If conflicts arise the user should have the last word…

– Håkon Lie

Kylo Ren and Rey
standing in front of an entire star war
with spaceships and lasers
and AT-AT walkers

Why we have… ❗importance

Importance… How Much Do They Care?

❗🎨 Author Important (goes first)
❗👥 User Important (override authors)
❗🖥 User Agent Important (most power)

🖥 User Agent Defaults
👥 User Preferences
🎨 Author Styles
❗🎨 Author Important
❗👥 User Important
❗🖥 User Agent Important

In the font preferences dialogue,
a default-checked option:
Allow pages to choose their own fonts,
instead of your selections above

The purpose of… ❗importance

Authors 👎🏼 Override Styles

We probably wrote ourselves

Users 👍🏼 Protect Styles

From future origins

Often Isolated

…
…
🎨 Author Styles
❗🎨 Author Important
❗…
❗…

Mechanical astrolabe
with Earth at the center,
and concentric rings
for other planets/stars

Clockwork orrery,
with planets circling the sun,
and the earth off to one side

Clockwork orrery,
with a scribbled arrow
pointing to the earth tilt gears
labeled 'specificity'

Origin & Importance
Selectors & Specificity
Cascade Layers
Scoped Styles
Container Queries

How Specifically

Is a selector targeting elements

AEA Denver website
with an hotpink dashed outline
around every element on the page

More Specific Styles
Likely
More Important

Heuristic

a practical assumption that approximates the goal

Assumptions Often Fail

inverted triange, with
range accross the top,
and specificity/explicitness
down the sides

Triangle, point down, with layers:
settings, tools, generics, elements,
objects, components, overrides

A graph
with specificity on the vertical axis,
and code line numbers horizontal,
divided into layers,
and a line showing that
specificity should only increase
throughout the code base

Origin & Importance
Selectors & Specificity
Cascade Layers
Scoped Styles
Container Queries

@layer settings { … }
@layer tools { … }
@layer generic { … }
@layer elements { … }
@layer objects { … }
@layer components { … }
@layer overrides { … }

@layer settings { … }
@layer tools { … }
@layer generic { … }
@layer elements { … }
@layer objects { … }
@layer components { … }
@layer overrides { … }

@layer Utilities { … }
@layer Components { … }
@layer Themes { … }
@layer Frameworks { … }
@layer Resets { … }

@layer reset {
  audio[controls] { display: block; }
  [hidden] { display: none !important; }
}

Layers of Specificity

Specificity is Contained

@layer framework {
  #menu .dropdown .item:hover {
    background: whitesmoke;
  }

  .menu-item {
    background: lightcyan;
  }
}

@layer framework {
  #menu .dropdown .item:hover {
    background: whitesmoke;
  }
}

@layer override {
  .menu-item {
    background: lightcyan;
  }
}

More Cascade Control

👎🏼 Escalating ❗️mportance

👍🏼 Managing Priorities

Like Origins, ❗️mportant Layers Reverse

Resets
Themes
Components

❗`important`

Resets
Themes
Components
❗mportant Components
❗mportant Themes
❗mportant Resets

Prioritize `->` Layers
Protect `->` Importance

For flexibility Layer Everything

Once we use un-layered styles, that’s as high as we can go

(But not Every Individual Thing)

A grid of overlapping
'scope' columns (buttons, cards, logins)
and 'layer' rows
(default, theme, component).
Each scope crosses all layers,
and each layer crosses all scopes.

Origin & Importance
Selectors & Specificity
Cascade Layers
Scoped Styles
Container Queries

1. Avoid Naming Conflicts

(across large teams & projects)

.post__title { /* BEM */ }
.title[data-JKGHJ] { /* Vue */ }

2. By Expressing Membership

(through lower boundaries & proximity)

.title { /* global */ }
.post .title { /* nested */ }

.post__title { /* BEM */ }

wireframe of a site, with multiple nested components

Diagram shows a component with porous boundaries,
all styles can penetrate, or establish their own lower boundaries

.light-theme a { color: purple; }
.dark-theme a { color: plum; }

@scope (.media) to (.content) {
  img { /* only images that are "in scope" */ }
}

See the Pen Scope boundary demo by @miriamsuzanne on CodePen.

See the Pen Scope proximity demo by @miriamsuzanne on CodePen.

See the Pen Visualizing scope by @miriamsuzanne on CodePen.

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 »»» 2020s

Flexbox & Grid

Box Alignment
Viewport Units
Intrinsic Sizing
Aspect Ratios
Min/Max/Clamp
&c.

@jensimmons Jen Simmons

Everything You Know About Web Design Just Changed

Truly Two-Dimensional Layouts
Combine Fluid & Fixed
Stages of Squishiness
Nested Contexts
Expand & Contract Content
Media Queries, As Needed

Intrinsic Web Design

The responsive web keeps evolving…

Nested Contexts ???
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.

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

😭 It’s Impossible

🥳 It’s Shipping

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

Name Containers

.sidebar {
  container-name: sidebar layout;
}

Shorthand (Names First)

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

There’s no default container…

html {
  // <name> / <type>
  container: root layout / inline-size;
}

Step 2… Query The Containers

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

Query Named Containers

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

Finding Containers

For each matched element…
Find the nearest ancestor that has…
- Any required container name
- Any required container types

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.

Style Queries

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

blockquote, em { font-style: italic; }

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

Chromium Prototype

Currently only custom properties

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

See the Pen Web component style query parameters by @miriamsuzanne on CodePen.

State Queries (???)

@container state(is-stuck) { … }

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

– Jen Simmons, Designing with Grid

Never Gonna Happen