99: More CSS functions
The CSS Podcast
In this episode of The CSS Podcast, Una and Bramus cover a bunch of CSS functions from comparison functions to tree counting functions, the random function, and more. Resources: min(), max(), and clamp() Web Dev article → https://goo.gle/4nvMthu Article by Ahmad Shadeed → https://goo.gle/3JvPznI Comparison functions → https://goo.gle/3JmbJsx sibling-count() and sibling-index() → https://goo.gle/3JCj33i attr() CSS attr() gets an upgrade → https://goo.gle/3JCj33i New capabilities for attr() → https://goo.gle/47inI3p light-dark() →...
info_outline
98: Customizable select
The CSS Podcast
In this episode of The CSS Podcast, Una and Bramus cover building customizable select menus. Have you ever had to build a dropdown menu where you want to do something as simple as change the color, or add little flag icons? You know how hard it can be! Discover how the web platform is solving this once and for all with the new customizable select API. Resources: Customizable select demos → https://goo.gle/43G5ruv Una Kravets (co-host) Bluesky | Twitter | YouTube | Website Making the web more colorful @googlechrome Bramus Van Damme (co-host) Bluesky | Mastodon | YouTube |...
info_outline
97: Invokers and commands
The CSS Podcast
In this episode of The CSS Podcast, we're diving into the power of invoker commands! Discover how the command and commandfor attributes allow you to declaratively open dialogs and show popovers. We'll explore standard commands and then jump into creating your own custom commands for more complex interactions. To close off, we’re covering the concept of "interest invokers" and how the new CSS properties and selectors they bring. Resources: Introducing command and commandfor blogpost → Authors Cards (Interest Invokers Demo) → Invoker Commands Explainer → Interest...
info_outline
96: CSS anchor positioning
The CSS Podcast
Welcome back to The CSS Podcast! Una and Bramus dive into CSS anchor positioning, a powerful new API that revolutionizes how developers handle dynamic UI element placement. Learn how to create interactive tooltips, popovers, and menus directly in CSS, eliminating the need for complex JavaScript. Resources: CSS anchor positioning → Anchor position tool → Follow-the-leader pattern with CSS anchor positioning → Anchor queries - Reposition tether arrow → Una Kravets (co-host) | | | Making the web more colorful Bramus Van Damme...
info_outline
95: Updates to View Transitions
The CSS Podcast
View Transitions have been around for a little while. This episode of The CSS Podcast covers some of the recent additions and changes since we last covered this in episode 89. Resources: What's new in view transitions (2025 update) → Same-document view transitions have become Baseline Newly available → Learn View Transitions → View Transitions Demos → Nested View Transition Groups → Scoped View Transitions → Una Kravets (co-host) | | Making the web more colorful ✨🎨 Web DevRel Unicorn face host of & 🎬 ...
info_outline
94: CSS carousels (and scroll)
The CSS Podcast
Welcome back to The CSS Podcast! We’re diving into a series of powerful scroll APIs that enable you to build custom, interactive carousels entirely with CSS, eliminating the need for JavaScript. These APIs, which also power customizable select elements, unlock even more innovative scroll-based experiences Resources: Carousels with CSS → ::scroll-marker → CSS Carousel Gallery → Carousel Configurator → Una Kravets (co-host) | | Making the web more colorful ✨🎨 Web DevRel Bramus Van Damme (co-host) | | | CSS DevRel; ; Scuba Diver 🤿
info_outline
93: State queries in 2025
The CSS Podcast
Una and Bramus dive into the latest advancements in CSS with state-based container queries. Learn how to create responsive and dynamic user experiences by querying the scroll state of UI elements, including 'stuck,' 'snapped,' and 'scrollable' states. Discover practical examples and techniques to replace complex JavaScript with declarative CSS, making your web development more efficient and powerful. Resources: Scroll state queries → Scroll-state-container → Anchor queries → Episode 59 → Una Kravets (co-host) | | | Making the web more colorful Bramus...
info_outline
92: CSS if() and custom functions
The CSS Podcast
Welcome back to the new season of the CSS Podcast, where Una and Bramus are your guides, your cohosts, and your CSS best friends. In this episode we dig into two very powerful new CSS features: inline conditionals with the if() function, and custom functions. Resources: CSS if() function specification → Article on if() by Una → Article on if() by Lea Verou → CSS mixins specification → Article on @function by Una → Article on @function and if() by Bramus → The CSS Space Toggle by Chris Coyier → Una Kravets (co-host) | | Making the web more colorful...
info_outline
091: Season 5 Wrap-up
The CSS Podcast
Una and Adam recap the season! They share their favorite features, stories, and use cases. Season 5 covered popovers, dialogs, top layers, trig functions, color functions, :has() tricks, balanced text wrapping, linear() easing, nesting, anchoring, state queries, view transitions, and scroll driven animation. What a year for CSS! Una Kravets (co-host) | | Making the web more colorful ✨🎨 Web DevRel Unicorn face host of & 🎬 Adam Argyle (co-host) | | CSS DevRel; ; maker; punk; CSS/JS/UX addict; 💀🤘
info_outline
090: Scroll-driven animations
The CSS Podcast
In this episode our esteemed guest returns! This time to help us grok Scroll Driven Animation. Learn all about scroll(), view(), animation-timeline, timeline-scope, animation-range, and more. Power those animations with off-the-main-thread CSS scroll animation powers. Resources: Bramus's Demos: All mentioned Demos + Tools + Video Course + DevTools Extension link → Video Course direct link: Adam's Demos: scroll() the hue wheel → CSS scroll() feature time warp → view() long bento list → view() scrolly telling → view() iOS-like app...
info_outlineIn this episode Una and Adam continue talking about dialogs and popovers, but this time it's all about animating them into and out of the top layer.. We'll be introducing starting-style, a new mode for transitioning discrete properties, and the overlay property for smooth entry and exit animations.
Links:
top-layer CSS spec → https://goo.gle/4c2elUW
Four new CSS features for smooth entry and exit animations by Una → https://goo.gle/3KpyB7e
Using @starting-style and transition-behavior for enter and exit stage effects → https://goo.gle/452FG7p
Popover on MDN → https://goo.gle/453xfss
:popover-open on MDN → https://goo.gle/3x5XLVl
Dialog and popover animated → https://goo.gle/3Kn1Ck7
Popover animated with nesting → https://goo.gle/3wW3Qns
What is the top layer? → https://goo.gle/457rUjQ
overlay property on MDN → https://goo.gle/3yKNRsT
MDN demos → https://goo.gle/4c2eIyO
Una Kravets (co-host)
Twitter | Instagram | YouTube
Making the web more colorful ✨🎨 Web DevRel @googlechrome Unicorn face host of @toolsday & Designing in the Browser 🎬
Adam Argyle (co-host)
Twitter | Instagram | YouTube
@GoogleChrome CSS DevRel; @CSSWG; VisBug maker; punk; CSS/JS/UX addict; 💀🤘