The CSS Podcast

:has() is a new CSS selector which allows developers to query for the presence of a child or state. It has been called the “parent selector”, but it’s much more than that! Using :has() you can style up and down a DOM tree, making this an incredible powerful feature. Learn how to take advantage of this new API with lots of examples in this episode. Links Blog → https://goo.gle/3CIs1EF  Selectors → https://goo.gle/3EQsPde  Pseudo-classes → https://goo.gle/3SgvH69  Creative CSS Layout → https://goo.gle/3yRv4sZ  Quantity Queries for CSS → https://goo.gle/3a4NPwT    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; 💀🤘   Catch more episodes → https://goo.gle/CSSpodcast  Subscribe to Google Chrome Developers → https://goo.gle/ChromeDevs  The CSS Podcast #CSSpodcast

In this episode Una and Adam explain a non-CSS property, but very relevant front-end UI property, called inert. It's a way to have a visually guarded part of the UI also be guarded for keyboard and screen reader users. Links Inert spec - https://goo.gle/3SXid0C  MDN - https://goo.gle/3rK1Ybd  Chrome Developers: Introducing Inert - https://goo.gle/3CLygZE    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

Container queries (also known as @container) are a new entrypoint for truly component-based responsive design. In this episode, Adam and Una will walk you through how to use them, what browser support looks like, and upcoming features that will give you even more control over your responsive interfaces! Links CQ + :has() → https://goo.gle/3ymiwJS MDN Docs → https://goo.gle/3ogyIrp   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

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

DevTools Mini Series continues, this time on interactions. Una Kravets and Adam Argyle are joined by Jecelyn Yeen to discuss interaction, and interaction inspection/ debugging in DevTools.  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; 💀🤘    Jecelyn Yeen Twitter | Facebook | YouTube Developer advocate @ChromeDevTools 📐🤩   The CSS Podcast #CSSpodcast

DevTools Mini Series continues, this time on accessibility tooling. Una Kravets and Adam Argyle are joined by Jecelyn Yeen to discuss how DevTools can help you discover and fix accessibility issues.   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; 💀🤘    Jecelyn Yeen Twitter | Facebook | YouTube Developer advocate @ChromeDevTools 📐🤩   The CSS Podcast #CSSpodcast

DevTools Mini Series continues, this time on layout. Una Kravets and Adam Argyle are joined by Jecelyn Yeen to discuss an overview of how DevTools can help you create and debug layouts.   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; 💀🤘    Jecelyn Yeen Twitter | Facebook | YouTube Developer advocate @ChromeDevTools 📐🤩   The CSS Podcast #CSSpodcast

Welcome to the DevTools Mini Series for The CSS Podcast. On this episode, Una Kravets and Adam Argyle are joined by Jecelyn Yeen to discuss an overview of color and shared tips.   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; 💀🤘    Jecelyn Yeen Twitter | Facebook | YouTube Developer advocate @ChromeDevTools 📐🤩   The CSS Podcast #CSSpodcast

We’ve reached the end of season 2 of the CSS Podcast. In this closing episode, we recap every episode by sharing our favorite tips and learnings from the last few months! Episodes reminisced E30 → Lists E31 → @rules E32 → Page Media Queries E33 → Preference Media Queries E34 → Overflow E35 → Background E36 → Text & Typography E37 → Cursors & Pointers E38 → N-Match Notation E39 → Paths, Shapes, Clipping and Masking E40 → @font-face E41 → Transforms E42 → Snap Points E43 → Containment E44 → Transitions E45 → @scroll-timeline E46 → Custom Properties E47 → :is(), :where(), and @nest E48 → Touch Interaction E49 → Accessibility E50 → Inherit, initial, inset, and revert E51 → Styling SVG E52 → Counters & @counter-style 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

Count on The CSS Podcast to cover counters. Una and Adam teach all the ways to create, reset, and update counters. Use them for lists, games and more!   Links Counters Level 3 → https://goo.gle/3f2BP18  Pure CSS Games Collection → https://goo.gle/3l0wrQe    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