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 | 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 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 | Website
Making 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 | Website
Making the web more colorful @googlechrome 
Bramus Van Damme (co-host)
Bluesky | Mastodon | YouTube | Website
@GoogleChrome CSS DevRel; @CSSWG; Scuba Diver 🤿