The CSS Podcast

Una and Bramus recap the season! They share some new updates and re-visit some of their favorite tips and tricks.Season 6 covered inline if() statements and custom functions, scroll state queries, carousel APIs, view transitions updates, anchor positioning, command invokers and interest invokers, customizable select, and a whole bunch of other CSS functions! Resources: Same-document view transitions have become Baseline Newly available → https://goo.gle/4nCyFSe Solved by CSS Scroll State Queries: hide a header when scrolling down, show it again when scrolling up (scrolled state query) → https://goo.gle/49uQMpN css-extras – A collection of useful CSS custom functions → https://goo.gle/4qFjIS5 CSS Mixins Specification (ED): Defining Mixins → ​​ https://goo.gle/3JpX4MZ Invoker Commands: Scroll Commands (OpenUI Meeting Notes) → https://goo.gle/47onsQB Anchored queries → https://goo.gle/4oMCvJT Customizable select → https://goo.gle/4r9Xsjv Una Kravets (co-host) Bluesky | Twitter | YouTube | WebsiteMaking the web more colorful @googlechrome Bramus Van Damme (co-host) Bluesky | Mastodon | YouTube | Website@GoogleChrome CSS DevRel; @CSSWG; Scuba Diver 🤿

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() → https://goo.gle/3X703wQ shape() Use shape() for responsive clipping → https://goo.gle/47zSHH0 Better CSS Shapes Using shape() → https://goo.gle/47OZMop ident() Article introducing ident() → https://goo.gle/4oHdYW9 ident() in the CSS Values and Units Specification → https://goo.gle/3LgN8pK random() Rolling the Dice with CSS random() → https://goo.gle/4oijnTO Generating Random Values → https://goo.gle/4hFwj3K CSS paint API: Being predictably random → https://goo.gle/3JEReau Una Kravets (co-host) Bluesky | Twitter | YouTube | Website Making the web more colorful @googlechrome Bramus Van Damme (co-host) Bluesky | Mastodon | YouTube | Website @GoogleChrome CSS DevRel; @CSSWG; Scuba Diver 🤿

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 | Website @GoogleChrome CSS DevRel; @CSSWG; Scuba Diver 🤿

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 → https://goo.gle/4ozmEy4 Authors Cards (Interest Invokers Demo) → https://goo.gle/42LU3x2 Invoker Commands Explainer → https://goo.gle/4o0DC8n Interest Invokers Explainer → https://goo.gle/4nfyZGi Una Kravets (co-host) Bluesky | Twitter | YouTube | WebsiteMaking the web more colorful @googlechrome Bramus Van Damme (co-host) Bluesky | Mastodon | YouTube | Website

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 → https://goo.gle/3KvYYeZ Anchor position tool → https://goo.gle/4gOYooL Follow-the-leader pattern with CSS anchor positioning → https://goo.gle/46s0kQD Anchor queries - Reposition tether arrow → https://goo.gle/42fXtI1 Una Kravets (co-host) Bluesky | Twitter | YouTube | WebsiteMaking the web more colorful @googlechrome Bramus Van Damme (co-host) Bluesky | Mastodon | YouTube | Website@GoogleChrome CSS DevRel; @CSSWG; Scuba Diver 🤿

Discover the fascinating world of View Transitions in CSS, exploring new types and how they enhance web navigation. Learn about same-document versus cross-document transitions and the latest browser support. The hosts reveal nifty tools like the match-element for simplifying names, and nested transition groups for preserving effects. Delve into scoped transitions that improve interaction and address z-index issues. Plus, find out how to access active transitions directly and where to experiment with demos. Lots of valuable insights await!

Explore the new CSS scroll APIs that allow for creating stunning carousels without any JavaScript. Discover how these features enhance user experience in real-world applications like app stores. Learn about styling scroll buttons, hiding scrollbars, and empowering accessible markers. Dive into creating interactive designs with :target-current and simple scroll-spy patterns. Uncover how to combine modern CSS techniques for dynamic web environments. This episode is packed with practical tips for web developers!

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 → https://goo.gle/4mQDQ0M Scroll-state-container → https://goo.gle/487y4nI Anchor queries → https://goo.gle/3IBDVaw Episode 59 → https://goo.gle/3KB7M3z Una Kravets (co-host) Bluesky | Twitter | YouTube | WebsiteMaking the web more colorful @googlechrome Bramus Van Damme (co-host) Bluesky | Mastodon | YouTube | Website@GoogleChrome CSS DevRel; @CSSWG; Scuba Diver 🤿

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 → https://goo.gle/3IBChWo Article on if() by Una → https://goo.gle/4nUxIp2 Article on if() by Lea Verou → https://goo.gle/4nt2UvS CSS mixins specification → https://goo.gle/48H8SEH Article on @function by Una → https://goo.gle/48H99rd Article on @function and if() by Bramus → https://goo.gle/46qPbzy The CSS Space Toggle by Chris Coyier → https://goo.gle/4874qio Una Kravets (co-host) Twitter | Instagram | YouTube Making the web more colorful ✨🎨 Web DevRel @googlechrome Unicorn face host of @toolsday & Designing in the Browser 🎬 Bramus Van Damme (co-host) Bluesky | Mastodon | YouTube | Website@GoogleChrome CSS DevRel; @CSSWG; Scuba Diver 🤿

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) 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; 💀🤘