Sign up to save your podcasts
Or
Share Revision 672: New Stuff coming to CSS
Share to email
Share to Facebook
Share to X
Share to email
Share to Facebook
Share to X
Or
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 @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.
View all episodes
By Vanessa Otto, Peter Kröner, Hans Christian Reinl, Stefan Baumgartner, Christian »Schepp« SchaeferIt’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.
More shows like Working Draft
View all
Chaosradio
7 Listeners
Bits und so
24 Listeners
Wissenschaft und Technik
8 Listeners
Raumzeit
10 Listeners
Logbuch:Netzpolitik
7 Listeners
c’t uplink - der IT-Podcast aus Nerdistan
6 Listeners
Apfelfunk
7 Listeners
heiseshow
3 Listeners
UKW
1 Listeners
kurz informiert by heise online
1 Listeners
Mac & i - der Apple-Podcast
0 Listeners
Wo wir sind ist vorne.
0 Listeners
Bit-Rauschen: Der Prozessor-Podcast von c’t
1 Listeners
KI-Update – ein heise-Podcast
6 Listeners
Passwort - der Podcast von heise security
3 Listeners