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, 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 🤿