CSS and SVG are very intertwined, and you can create a lot of unique effects by combining the two. This episode dives into a few CSS + SVG tips and tricks, including where and how to use SVG on your page, icon systems, color theming, adding animations, filter effects, and more!   Links Solved with CSS: Colorizing SVG → https://goo.gle/3x0Uilb SVGOMG  → https://goo.gle/3hS6ksJ SVG spec  → https://goo.gle/3wVgRYe   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

This episode is about the very available CSS values inherit, initial, unset and revert. We'll help explain what they are, what they do and when to use them.   Links CSS Tricks Article → https://goo.gle/2U5PxJw  Quirksmode Article → https://goo.gle/2TY80rz    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

Today we are breaking down accessibility related styling choices to ensure a better user experience for all of your users. These include focus visibility, keyboard navigation, and more!  Links #lintHTMLwithCSS - https://goo.gle/3dSMIlU  CSS Speech Level 1 - https://goo.gle/3xrg3vc  Media Queries Level 5 - https://goo.gle/3qUcBXz   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

Today we touch on touch interaction. Covering CSS's ability to change a user's touch experience with properties like touch-action, scroll-behavior, user-select and more.   Links MDN - https://goo.gle/3y8My14  Spec - https://goo.gle/3dm4opF    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, Adam and Una explore some CSS syntactic sugar! They discuss the :is and :where functions, how they differ, and how they’re paving the way for nesting.    Links Adam's post on web.dev → https://goo.gle/3qhYifl  MDN :is() → https://goo.gle/3qgU0Vf  Forgiving selector parsing → https://goo.gle/3xLTYHL    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

Custom properties, aka CSS variables, are runtime dynamic variables which allow you to store loose or typed values. They're free, super fast, improve code legibility, unlock powers, are reachable with JavaScript, animateable, overall super fun and, well, kind of complex.   Links Module Level 1 → https://goo.gle/3wtADL1  82% of developers get this 3 line CSS quiz wrong → https://goo.gle/2U8oTPR  A user’s guide to CSS variables → https://goo.gle/3zlmscV  Locally Scoped CSS Variables: What, How, and Why → https://goo.gle/2KGESwR  GitHub → https://goo.gle/3iOiVOa    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 we deep dive the experimental Scroll Animations spec to bring you the breakdown on @scroll-timeline powered CSS animation. Learn about scroll-linked animations vs scroll-triggered animations and how to orchestrate scroll interactions with elements of the page.    Links Scroll animations level 1 draft →https://goo.gle/3pvWX49  Polyfill → https://goo.gle/3x8CQvw  GUI Challenges - Tabs → https://goo.gle/34YYl5J  Bramus's talk → https://goo.gle/2TPs7HU    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 it's all about transitions. What you can and can't transition, it's limits, and it's super powers. We'll finish up with ways to trigger transitions and a few tips and tricks.   Links CSS Transitions https://goo.gle/3vIDi31  Cont. https://goo.gle/3pcpueY    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

The CSS contain property can give you some serious performance gains by adjusting how and when the browser renders elements. In this episode, we go over all the different types of containment, and where you might use them.   Links MDN doc on containment → https://goo.gle/3fRejEd  Content-visibility → https://goo.gle/3wBMB52    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 we're guiding scroll areas into their peaceful resting places, maintaining alignment, keeping visual harmony, and improving the overall experience with the content.   Links Scroll Snap Level 1 draft → https://goo.gle/2R9hUow  overscroll-behavior → https://goo.gle/3o7vLYE  scroll-behavior → https://goo.gle/3uKvkWU    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