The CSS Podcast

Guest Una Kravets, Web DevRel @googlechrome, discusses layout shift in CSS, including different types of shifts, mitigating image load layout shift, effects of JavaScript and lazy loading, and combating layout shift using CSS.

Learn how to make your images just right and the reasons they might look funky. Discusses image distortions, controlling image sizes with CSS, foreground and background images, SVG image issues and solutions, and tips for responsive images.

Una Kravets, co-host, discusses overflowing content on web pages, flex layout issues, addressing overflowing elements with CSS techniques and tools, understanding how transforms cause overflow, the importance of max width and max height, and useful DevTools tips for troubleshooting overflow problems.

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 & 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 YouTube → https://goo.gle/ChromeDevs 

Learn why z-index may not be working for you in CSS. Explore stacking context and best practices for proper layering. Discover tools like CSS hints in Chrome DevTools for troubleshooting. Get tips on managing z-index, avoiding 'magic numbers', and visualizing layers in 3D. Dive into strategies for debugging z-index values, utilizing new HTML elements, and creating non-overlapping promotions. Understand the complexities of z-index in CSS and how it relates to layering. Send in CSS queries and show support for the podcast!

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 & 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 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 & 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 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 & 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 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 & 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 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 & 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