Revision 672: New Stuff coming to CSS

It’s not every day we get to talk to someone who actually helps shape the CSS of tomorrow – which is why we were thrilled to welcome back Adam Argyle (LinkedIn / Bluesky / Mastodon), creative tinkerer, punk engineer and a big fan of CSS, JS and great UX!

Together with Schepp and Vanessa, Adam takes us on a tour of what’s new and what’s next in CSS. From cutting-edge selectors and scroll state features to color functions, motion preferences, and even the future of form controls – this episode is packed with practical insights and exciting perspectives.

Show Notes

[00:01:03] contrast-color() & CSS color tooling We kick things off by talking about the new contrast-color() function and why it’s a big deal for authoring accessible themes. Adam explains how tools like his Observable playground help explore the
complexities of calculating good contrast. We also touch on the prefers-contrast media query and how it relates to other preference queries like prefers-reduced-data or forced-colors. [00:37:40] control-value() Adam introduces the control-value() function that allows you to style components based on their value – like coloring inputs depending on current value – and we talk about a future where CSS can directly react to user interaction or state without JavaScript. This ties into upcoming functions like sibling-index() and
sibling-count(), with a great demo on nerdy.dev. [00:43:07] Scroll Experience What if you could style elements differently based if they are overflowing, or if they are snapped or stuck? That’s what scroll-state()
unlocks. Adam walks us through why it matters for carousels and nested scroll containers. We also touch on related concepts like scroll-snap, the scrollsnapchanging, scrollsnapchange and scrollend events, ::scroll-marker and ::scroll-button() pseudo elements. Links include a full CSS-only Nintendo-style home screen on nerdy.dev and Chrome’s carousel demo. [01:17:29] Mixins, Functions & if-Statements Mixins and functions are finally coming to CSS to make code and mechanics reusable! So are if-statements. Una did a short video on those. [01:20:10] @starting-style, transition-behavior & 3D view transitions We discuss how