Show Notes
In this episode Una and Adam cover Cascade Layers (aka @layer). It's a way for authors to control and orchestrate their own CSS layering which can help avoid specificity and asynchronous loading issues. Instead of styles taking the most recent style based on order of appearance, orchestrate layers and place styles inside them to control which overrides which. Links MDN - https://goo.gle/3UjB6vL Smashing Magazine - https://goo.gle/3ByUT1u Una on YouTube - https://goo.gle/3Sm2zLc Bramus at CSS Day 2022 - https://goo.gle/3LtfxVg Bramus's blog - https://goo.gle/3xEj2CM Subscribe to Google Chrome Developers YouTube - https://goo.gle/ChromeDevs
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; 💀🤘
The CSS Podcast #CSSpodcast
More from 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
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
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.
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.