CSS Day 2026

CSS Day 2026 in Amsterdam was two weeks ago and I still cannot get it out of my head. Here are the techniques that stuck, the ones I actually want to use.

Color

• Work in oklch() for predictable, perceptually even colors. Mixing and lightening hex values is why you keep getting mud.
• Build palettes generically and use chroma clipping to keep them in gamut instead of hand-picking hex values.

Text size and user preferences

• Use rem, but never set a root rem yourself. The browser preference owns it, and overriding it breaks the user's OS text size (which roughly a third of phone users change).
• New env values expose the OS text scaling.
• Do fluid type and spacing properly. utopia.fyi is the reference.
• Treat prefers-* (dark, light, contrast, reduced motion) as instructions, not edge cases.

CSS replacing JavaScript

• Advanced attr(), style queries and if() let CSS read and interpret values. JS just fetches data and hands it to CSS.
• popover, commandfor, anchor positioning with position-try and flip rules, calc-size() and appearance: base-select replace most menu, tooltip and custom-select libraries.

Motion

• View transitions: morph between elements with view-transition-name, animate across pages with @view-transition, no framework needed.
• Scroll-state queries let an element react to being stuck or scrolled. This replaces a lot of janky scroll JavaScript.

Theming

• color-scheme, light-dark() for specific elements, and system colors give you light and dark without override soup.

Performance

• content-visibility skips rendering offscreen content until needed. Low effort, high impact on long pages and heavy canvases.

Worth bookmarking

• defensivecss.dev
• htmhell.dev
• accessibility-cookbook.com
• utopia.fyi
• CSS Working Group repo

For the full speaker line-up and the talks, check cssday.nl.