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

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

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

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

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

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

: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 →...

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

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

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

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

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. Subscribe to Google Chrome Developers → https://goo.gle/ChromeDevs 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. Subscribe to Google Chrome Developers → https://goo.gle/ChromeDevs 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. Subscribe to Google Chrome Developers → https://goo.gle/ChromeDevs 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!

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

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

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

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!

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. MDN - https://goo.gle/3y8My14 Spec - https://goo.gle/3dm4opF

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. 

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.

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

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. CSS Transitions -> https://goo.gle/3vIDi31 Cont. -> https://goo.gle/3pcpueY

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. MDN doc on containment → https://goo.gle/3fRejEd Content-visibility → https://goo.gle/3wBMB52