Search

Home > Working Draft » Podcast Feed > Revision 672: New Stuff coming to CSS
Podcast: Working Draft » Podcast Feed
Episode:

Revision 672: New Stuff coming to CSS
Category: Technology
Duration: 01:28:16
Publish Date: 2025-07-29 06:58:39
Description:

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
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.
Total Play: 0

Users also like

600+ Episodes
Einschlafen .. 4K+     200+

Some more Podcasts by Vanessa Otto, Peter Kröner, Hans Christian Reinl, Stefan Baumgartner, Christian »Schepp« Schaefer

1K+ Episodes
Working Draf ..     1