Supper Club × Adam Argyle on What's New in CSS

Episode Summary

Executive Summary: Adam Argyle joins Syntax to survey the rapidly evolving CSS landscape: new relative units, gradients and color spaces, style queries, view transitions, trig functions, text wrapping, discrete animations, cascade layers, nesting improvements, and more. The episode emphasizes how modern CSS now replaces many JavaScript and design-tool workflows while improving accessibility, responsiveness, and polish.

Main Topics: CSS’s rapid expansion and new naming/education efforts: The hosts frame CSS as having changed dramatically in the last few years, and Adam explains the CSS4 community group’s effort to create friendlier labels for modern feature sets to help education and adoption. New relative length units and responsive typography: Adam highlights root-relative and font-metric units such as rex, ric, and rlh, explaining how they let layouts respect user font preferences and enable advanced baseline/grid alignment. Gradients, color spaces, and the gradient.style tool: A major segment covers gradient.style, a visual tool built with Svelte Kit, TypeScript, and Open Props to showcase modern gradients, HDR colors, transition hints, and color interpolation. Style queries, container queries, and state-driven CSS: The discussion explains how style queries let CSS react to custom-property state now, with future support for querying computed style and element state like stuck, snapped, or overflowed. View transitions and scroll-linked animation APIs: Adam describes view transitions for page and DOM morphing, plus scroll-linked/view-timeline style animations that can replace JavaScript scroll observers with browser-native motion. Nesting, discrete animations, and modern cascade control: The episode covers upcoming improvements to nesting syntax, animating discrete properties like display by delaying flips, and cascade layers for cleaner style architecture and overrides. Browser ecosystem, interop, and emerging platform primitives: The hosts and guest discuss Firefox, Safari, Chrome, and vendor support efforts, then speed through features like :has(), nth-child of syntax, subgrid, linear() easing, media query ranges, and custom select menus.

Key Arguments: Modern CSS is now powerful enough to replace many design-tool and JavaScript-heavy workflows, especially for layout, animation, and responsive UI. Root-relative and metric-aware units make CSS respect user font preferences instead of hardcoding assumptions. Gradient and color-space upgrades make web visuals visibly better, especially with HDR and interpolation control. Style queries will let components react to custom-property state, reducing the need for classes and JS-driven toggles. View transitions and scroll-linked animations push motion work into the browser, enabling smoother, more native-feeling experiences. Cascade layers and better nesting are helping CSS scale in large applications by making style overrides and structure more manageable. Several of these features are intended to degrade gracefully, so adopting them can be progressive rather than risky. Browser vendors and cross-company efforts are actively driving interoperability, so CSS innovation is not limited to one engine.

Data Points: CSS length units: 50 - Adam notes that recent additions, including dynamic viewport units and the new relative units, bring CSS to 50 length units. Gradient tool development time: a couple of nights - Adam says the early prototype of gradient.style took just a couple of nights, with visual layering taking longer. Gradient pack size in Open Props: 30 - He mentions Open Props includes a pack of 30 gradients. Google I/O talk: upcoming - Adam says he will have a talk at Google I/O and that CSS topics will be included. Browser support status for style queries: Chrome shipping; Safari working on it - The guest explains style queries are still early and not yet broadly stable. Subgrid interoperability: Firefox, Safari, Chrome - The discussion notes subgrid is present in Firefox and Safari, with Chrome nearing release. Scroll-linked animation phases: 2 - Adam describes scroll-linked behavior in two phases: scroll attachment and viewport-entry/exit state tracking. Example animation delay: 0.3 seconds - Used as an example for delaying a discrete transition flip such as display changes after a fade-out.

Pivotal Quotes: "CSS is booming right now." — Adam Argyle: Used to frame the pace and breadth of new CSS features and why the episode is focused on recent changes. "If the rem wasn't good enough for you, if that root m was not, here's some more." — Adam Argyle: Explaining the value of new root-relative units and how they build on familiar responsive typography concepts. "Let the browser do it for you. Let the browser optimize it. I don't want to be in charge of any of this stuff." — Wes Bos: Discussing view transitions and why native browser animation primitives are preferable to hand-rolled JavaScript solutions.

Implications: Listeners should expect CSS to absorb more responsibilities once handled by JavaScript and design apps, with better accessibility and smoother UX. Teams that adopt these features incrementally can ship richer interfaces with less code and better browser-native performance.