The CSS Podcast 431m1n

In this episode we're shifting the topic to layout shift, that moment where you watch the page adapt to something lazily loaded which has impacted the layout in some way where you see content shift around.   Links: CLS - https://goo.gle/3kle3AW  Optimizing CLS - https://goo.gle/3fxu6IE  CSS for Web Vitals - https://goo.gle/3E98gY9    Una Kravets (co-host) Twitter | Instagram | YouTube Making the web more colorful ✨🎨  Web DevRel @googlechrome Unicorn face host of @toolsday & Deg in the Browser 🎬    Adam Argyle (co-host) Twitter | Instagram | YouTube @GoogleChrome CSS DevRel; @CSSWG; VisBug maker; punk; CSS/JS/UX addict; 💀🤘 Subscribe to Google Chrome Developers → https://goo.gle/ChromeDevs

Too small? Too big? Learn how to make your images just right and all the reasons they might be looking a little funky when you’re adding media to your interface.   Links: CSS for Web Vitals → https://goo.gle/3E98gY9  Learn Responsive Images  → https://goo.gle/45EFuds  Aspect Ratio → https://goo.gle/3PdyjDS  Demos → https://goo.gle/3qJuQ6z & https://goo.gle/45uDvZB    Una Kravets (co-host) Twitter | Instagram | YouTube Making the web more colorful ✨🎨  Web DevRel @googlechrome Unicorn face host of @toolsday & Deg 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

In this episode we're overjoyed to overexplain why you may be having overflow in your page. somewhere over the rainbow, an overheating developer overcooked the inline sizes and ended up oversleeping for work the next day. Now let's overanalyze and overshare about CSS overflow.   Links: The rules of Margin Collapse → https://goo.gle/441OGaH   Everything you need to know → https://goo.gle/4434Ctj  Check out → https://goo.gle/3YrJDiw     Una Kravets (co-host) Twitter | Instagram | YouTube Making the web more colorful ✨🎨  Web DevRel @googlechrome Unicorn face host of @toolsday & Deg 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 YouTube → https://goo.gle/ChromeDevs The CSS Podcast #CSSpodcast  

In this episode we explore why margin may not be working for you. We’ll teach you about block formatting contexts and margin collapsing! We'll make you the space you want in your designs! Links: The Rules of Margin Collapse → https://goo.gle/441OGaH  CSS Margins → https://goo.gle/4434Ctj  Learn more → https://goo.gle/3YrJDiw    Una Kravets (co-host) Twitter | Instagram | YouTube Making the web more colorful ✨🎨  Web DevRel @googlechrome Unicorn face host of @toolsday & Deg 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 YouTube → https://goo.gle/ChromeDevs 

In this episode we explore why z-index isn’t working for you. We’ll teach you about stacking context and how to make sure you’ve set yourself up for layering success! us on this journey through positioning, variable architecture, tools, and more, to bring those elements to light. Links: Stacking context → https://goo.gle/43It8jl  Una Kravets (co-host) Twitter | Instagram | YouTube Making the web more colorful ✨🎨  Web DevRel @googlechrome Host of @toolsday & Deg 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 YouTube → https://goo.gle/ChromeDevs

Listen to Adam and Una recap all of the exciting landings they talked about in 2022 in this end-of-season recap. If you missed the others, don’t miss this one! Una Kravets (co-host) Twitter | Instagram | YouTube Making the web more colorful ✨🎨  Web DevRel @googlechrome Unicorn face host of @toolsday & Deg in the Browser 🎬    Adam Argyle (co-host) Twitter | Instagram | YouTube @GoogleChrome CSS DevRel; @CSSWG; VisBug maker; punk; CSS/JS/UX addict; 💀🤘   Catch more episodes on YouTube→ https://goo.gle/CSSpodcast Subscribe to Google Chrome Developers YouTube → https://goo.gle/ChromeDevs   The CSS Podcast #CSSpodcast

In this episode Una and Adam talk about CSS Nesting, per the current 2022 spec draft. They'll cover the syntax basics, some gotchas and of course a bunch of examples.    Links Nesting 1 Spec - https://goo.gle/3VgnoJR  Adam exploring the prototype implementation in Canary - https://goo.gle/3UGsMpv  @scope and @layer and nesting - https://goo.gle/3EyJ3Hq    Una Kravets (co-host) Twitter | Instagram | YouTube Making the web more colorful ✨🎨  Web DevRel @googlechrome Unicorn face host of @toolsday & Deg 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 YouTube → https://goo.gle/ChromeDevs      The CSS Podcast #CSSpodcast

In this episode Una and Adam discuss subgrid, a special value for grid-template-rows or grid-template-columns. Learn the general details of usage, use cases, tips, tricks and gotchas, so you can use the feature with confidence.   Links CSS Grid Spec - https://goo.gle/3EfjoDq  MDN - https://goo.gle/3tbooTx  Smashing Magazine - https://goo.gle/3DUb7Ds  Ahmad Shadeed on Subgrid - https://goo.gle/3EeStaP  State of CSS (subgrid) - https://goo.gle/3fQDvP4  Full Bleed Subgrid demo - https://goo.gle/3TkZ1Jv    Una Kravets (co-host) Twitter | Instagram | YouTube Making the web more colorful ✨🎨  Web DevRel @googlechrome Unicorn face host of @toolsday & Deg 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 YouTube → https://goo.gle/ChromeDevs      The CSS Podcast #CSSpodcast

Media query range syntax is a really nice addition.    Links Polyfill: https://goo.gle/3TXcyYD  New syntax for range media queries: https://goo.gle/3DQlHg0    Una Kravets (co-host) Twitter | Instagram | YouTube Making the web more colorful ✨🎨  Web DevRel @googlechrome Unicorn face host of @toolsday & Deg in the Browser 🎬    Adam Argyle (co-host) Twitter | Instagram | YouTube @GoogleChrome CSS DevRel; @CSSWG; VisBug maker; punk; CSS/JS/UX addict; 💀🤘   Catch more episodes on YT → https://goo.gle/CSSpodcast    Subscribe to Google Chrome Developers → https://goo.gle/ChromeDevs      The CSS Podcast #CSSpodcast

In this episode Una and Adam cover changes to the color level 5 and new color level 6 specs, so you can stay HD on the topic. Plus, a dive into CSS color functions for manipulating colors. Links CSS Color Module Level 5 → https://goo.gle/3f8BgpT  CSS Color Module Level 6 → https://goo.gle/3TIsPAI    Una Kravets (co-host) Twitter | Instagram | YouTube Making the web more colorful ✨🎨  Web DevRel @googlechrome Unicorn face host of @toolsday & Deg 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

: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 & Deg 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 s. 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 & Deg 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 looks like, and 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 & Deg 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 & Deg 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 ed 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 & Deg 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 ed 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 & Deg 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 ed 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 & Deg 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 ed 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 & Deg 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 & Deg 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 & Deg 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