Chapter 10 / Modern CSS

CSS that used to need JavaScript.

Container queries, the parent selector, anchor positioning, view transitions and oklch color. Each demo shows whether your browser supports the feature and falls back gracefully when it does not.

Demos

Container queries

The card responds to the width of its own box, not the window. Drag the handle and it reflows into three layouts.

  • @container
  • container-type
Seared scallops
Tonight

Scallops, leek and brown butter

Seared over coals and finished with charred leeks.

Drag the corner, or use the slider. Width: 0px

The :has() selector

The checklist counts and celebrates with CSS counters and :has(), and the gallery dims every image except the one you point at. Zero JavaScript.

  • :has()
  • CSS counters

Launch checklist

InteriorFoodPipPoster

Anchor positioning

The tooltip is tied to the chip with anchor-name and position-anchor, and position-try flips it when space runs out. A small script takes over in browsers without support.

  • anchor()
  • position-try

View transitions

Click a tile and it morphs into a detail view, image and title travelling to their new places. The browser animates between the two states by itself.

  • View Transitions
  • view-transition-name

A color system in oklch

Turn the hue and the whole theme follows: an eleven-step scale, a card and buttons. oklch keeps the perceived lightness even, which is something HSL never could.

  • oklch()
  • color-mix()
Generated theme

One hue, a whole palette.

Every step is oklch with even lightness, so contrast stays predictable at any hue.