I can’t believe we’re already at the end of season 4! This season, we’ve been focusing on CSS gotchas and resolving these common CSS pitfalls. And alas, on our last episode of the season, we’re going to take a look back at all of those tips and tricks and pick some of our favorites to highlight in this recap episode.   Links: Why isn’t percentage working → https://goo.gle/418EnBG  Why isn’t my element stuck → https://goo.gle/3uSX7Jk  Why isn’t my custom property the value I expect → https://goo.gle/47BcZPj  How do I center a div → https://goo.gle/3RiOBLA   Why isn ..read more

In this episode Una and Adam help you uncover moments where a sticky element isn't sticking. There are a couple of gotcha around implementing a sticky element and by the end of the show you'll know what they are and a few ways to work around them.   Links: sticky stack - https://goo.gle/3QICxTz  sticky desperado - https://goo.gle/3sC3OPj   sticky slide - https://goo.gle/47bcRGb    Una Kravets (co-host) Twitter | Instagram | YouTube Making the web more colorful ✨?  Web DevRel @googlechrome Unicorn face host of @toolsday & Designing in the Browser ?  ..read more

In this episode, Una and Adam discuss common gotchas with custom properties, which often feel fully reactive during use, but their limits and implementation details can popup at unexpected times and create a headache. They'll cover these situations and their solutions!   Links: Value stages → https://goo.gle/3FDo7yA  How custom property values are computed →https://goo.gle/49cOUiQ  A complete guide to custom properties → https://goo.gle/40gtVb8  The big gotcha with custom properties → https://goo.gle/45VwUHe   CodePen → https://goo.gle/3SdMnyY     U ..read more

In this episode we tackle one of the most asked questions of all CSS history.. how do I center this div? We'll cover multiple strategies that each have tradeoffs and super powers over each other.    Links: Centering in CSS → https://goo.gle/3RRki02  Comparing grid and flex place-items and place-content → https://goo.gle/3ZE3NGM  Centering in CSS: A Complete Guide → https://goo.gle/46xudw7  Centering examples from Una → https://goo.gle/3rF7lvR    Una Kravets (co-host) Twitter | Instagram | YouTube Making the web more colorful ✨?  Web DevRel @googlechrome ..read more

On this episode of the #CSSpodcast, we’re diving into how to deal with glitchy animations in your code base!   Links: MDN transform-style - https://goo.gle/45YFu8B  MDN backface-visibility - https://goo.gle/46mPvfE   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; ?? Subscribe to Google Chrome Developers → https://g ..read more

In this episode, we tackle the issues around getting undesirable gradient results. Sometimes it's you, sometimes it's the color space. We'll help you identify, assess and remedy muddy gradients.   Links: HD color guide - https://goo.gle/3RhyvmP  various gradients in color spaces - https://goo.gle/3Pc02TV  modern css gradient tool - https://goo.gle/3P4KxNI  try color mix - https://goo.gle/3r2toML  color-mix() with white hover codepen - https://goo.gle/3Pw6mHm  interpolation visualizer - https://goo.gle/45GwS6t    Una Kravets (co-host) Twitter | Instagram ..read more

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 & Designing in the Browser ?    Adam Argyle (co-host) Twitter | Instagram | You ..read more

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 & Designing in the Browser ?    ..read more

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! Join 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 & Designing in the Browser ?  Adam Argyle (co-host) Twitter | Instagram | YouTube @GoogleChrome CSS DevRel; @CSSWG ..read more

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 ..read more