Revision 672: New Stuff coming to CSS

What this episode covers

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 @starting-style and transition-behavior: allow-discrete open new possibilities for complex animations. Adam references his CSS Day slides and what he calls “pleasant to use” transitions, including view transitions and split-text effects. We talk about the challenges of layering interactivity and animation, and where tools like GSAP might still help. [01:21:36] CUSTOM FORM CONTROLS The customizable element finally becomes a reality! We dive into how Chrome is exposing a lot of its UI internals via new pseudo-elements. More info on the Chrome Dev Blog. [01:23:26] THE FUTURE: CSS 4? CSS 5? Do we still believe in the CSS Level model? Adam shares his views on what CSS 4 or 5 might mean today and what „groupings“ of features could look like. We also touch on Apple’s contributions to modern CSS and the coordination between browser vendors. For more on the terminology mess: listen to our episode 640 (German). LINKS CONTRAST-COLOR() Automatically computes a legible foreground color based on a background. CONTRAST-COLOR PLAYGROUND Adam’s interactive tool to visualize color contrast behavior. SIBLING-INDEX() A future CSS function to style elements based on their position within siblings. NINTENDO SWITCH HOME SCREEN DEMO Fully CSS-driven demo showcasing advanced scroll and interaction techniques. CHROME CSS CAROUSEL DEMO Google’s showcase of scroll snapping and scroll-triggered UI using pure CSS. CSS DAY 2025 SLIDES Adam’s slide deck with plenty of demos and visuals from his CSS Day presentation. A CUSTOMIZABLE Chrome exposes pseudo-elements for fully styling native dropdowns. „OH SNAP!“ TALK BY ADAM ARGYLE Adam’s in-depth talk about scroll, snapping and modern interaction affordances in CSS.

PodParley-generated summary based on available episode metadata and transcript content.