The CSS Podcast

Cascading Style Sheets (CSS) is the web’s core styling language. For web developers, It’s one of the quickest technologies to get started with, but one of the hardest to master. Follow Una Kravets and Adam Argyle, Developer Advocates from Google, who gleefully breakdown complex aspects of CSS into digestible episodes covering everything from accessibility to z-index.

091: Season 5 Wrap-up 10/03/2024

091: Season 5 Wrap-up Una and Adam recap the season! They share their favorite features, stories, and use cases. Season 5 covered popovers, dialogs, top layers, trig functions, color functions, :has() tricks, balanced text wrapping, linear() easing, nesting, anchoring, state queries, view transitions, and scroll driven animation. What a year for CSS! Una Kravets (co-host) | | Making the web more colorful ✨🎨 Web DevRel Unicorn face host of & 🎬 Adam Argyle (co-host) | | CSS DevRel; ; maker; punk; CSS/JS/UX addict; 💀🤘 /episode/index/show/thecsspodcast/id/33300422

090: Scroll-driven animations 09/26/2024

090: Scroll-driven animations In this episode our esteemed guest returns! This time to help us grok Scroll Driven Animation. Learn all about scroll(), view(), animation-timeline, timeline-scope, animation-range, and more. Power those animations with off-the-main-thread CSS scroll animation powers. Resources: Bramus's Demos: All mentioned Demos + Tools + Video Course + DevTools Extension link → Video Course direct link: Adam's Demos: scroll() the hue wheel → CSS scroll() feature time warp → view() long bento list → view() scrolly telling → view() iOS-like app switcher → view() variable font animation → Una Kravets (co-host) | | Making the web more colorful ✨🎨 Web DevRel Unicorn face host of & 🎬 Adam Argyle (co-host) | | CSS DevRel; ; maker; punk; CSS/JS/UX addict; 💀🤘 /episode/index/show/thecsspodcast/id/33207227

089: View transitions 09/19/2024

089: View transitions In this episode Una and Adam bring on an esteemed guest Bramus, who brings us deep knowledge on View Transitions. These are easy to get started with but difficult to master, but not with Bramus here to teach us. He'll be covering introductory to advanced API features and a big bag of examples and demos. Resources: Developer Documentation → Quick intro to View Transitions (Google I/O 2023 video) → What's new in View Transitions? (Google I/O 2024 video) → Misconceptions about View Transitions → Bramus's Demos: Collection of various demos, both SPA and MPA → Accordion → Adam's Demos: Grid gallery → Always great grid → Flexbox visualizer → Editable tabs → Dollar number input → Stateful morphing button → Drag and Drop → Isotope recreation → Local development animated → Una Kravets (co-host) → → Making the web more colorful ✨🎨 Web DevRel Unicorn face Host of Tools Today → & 🎬 → Adam Argyle (co-host) → → → CSS DevRel; ; maker; punk; CSS/JS/UX addict; 💀🤘 CSSWG → VisBug → The CSS Podcast #CSSpodcast /episode/index/show/thecsspodcast/id/33123277

088: State queries 09/12/2024

088: State queries In this episode, Una and Adam discuss a future web capability that builds on container queries: state queries. From CSS, this feature will be able to detect if a container is overflowing, when an element is scroll snapped, and when an element is stuck from position: sticky. Resources: :stuck, :snapped, :on-screen, etc → state queries syntax → explainer → Intent To Prototype → Scroll Snap Events → Una Kravets (co-host) → → Making the web more colorful ✨🎨 Web DevRel Unicorn face Host of Tools Today → & 🎬 → Adam Argyle (co-host) → → → CSS DevRel; ; maker; punk; CSS/JS/UX addict; 💀🤘 CSSWG → VisBug → The CSS Podcast #CSSpodcast Watch more The CSS Podcast → Subscribe to Chrome for Developers → #CSSPodcast #ChromeForDevelopers #Chrome Speaker: Una Kravets, Adam Argyle /episode/index/show/thecsspodcast/id/33010397

087: Anchor positioning 08/22/2024

087: Anchor positioning In this episode Una and Adam explain anchor positioning and all its amazing features. Resources: Introducing the CSS anchor positioning API → CSS anchor positioning → → Una's Anchor Tool → Una Kravets (co-host) | | Making the web more colorful ✨🎨 Web DevRel Unicorn face host of & 🎬 Adam Argyle (co-host) | | CSS DevRel; ; maker; punk; CSS/JS/UX addict; 💀🤘 /episode/index/show/thecsspodcast/id/32691557

086: Nesting 2024+ 08/08/2024

086: Nesting 2024+ In this episode Una and Adam catch you up to the latest syntax features of CSS nesting. Resources: Episode 47 → Episode 65 → CSS Nesting Update → Una Kravets (co-host) | | Making the web more colorful ✨🎨 Web DevRel Unicorn face host of & 🎬 Adam Argyle (co-host) | | CSS DevRel; ; maker; punk; CSS/JS/UX addict; 💀🤘 /episode/index/show/thecsspodcast/id/32499727

085: Linear easing function fun 08/01/2024

085: Linear easing function fun In this episode Una and Adam cover the linear() CSS easing function that can create bounce and spring effects. Resources: Ep 22 on Animation → linear() generator → Complex animation curves in CSS with linear() → Open Props premade spring and bounce variables → Una Kravets (co-host) | | Making the web more colorful ✨🎨 Web DevRel Unicorn face host of & 🎬 Adam Argyle (co-host) | | CSS DevRel; ; maker; punk; CSS/JS/UX addict; 💀🤘 /episode/index/show/thecsspodcast/id/32388382

084: Text Wrap 07/11/2024

084: Text Wrap In this episode Una and Adam talk about text wrap, a great modern improvement to typography on the web platform. Learn how you can create logical layout rules for your headings and other copy with just one line of code. Resources: text-wrap on MDN → soft breaks → Una Kravets (co-host) | | Making the web more colorful ✨🎨 Web DevRel Unicorn face host of & 🎬 Adam Argyle (co-host) | | CSS DevRel; ; maker; punk; CSS/JS/UX addict; 💀🤘 /episode/index/show/thecsspodcast/id/32097362

083: :has() tips and tricks 07/03/2024

083: :has() tips and tricks In this episode Una and Adam expand on episode 61 about :has() by focusing specifically on use cases, tips and tricks. Get inspired and discover new ways to make reactive UI from CSS. Resources: Ep 61 → Piccali → Ahmad Shadeed → The Looper → Una Kravets (co-host) | | Making the web more colorful ✨🎨 Web DevRel Unicorn face host of & 🎬 Adam Argyle (co-host) | | CSS DevRel; ; maker; punk; CSS/JS/UX addict; 💀🤘 /episode/index/show/thecsspodcast/id/31998752

082: What's new in color & color functions 06/27/2024

082: What's new in color & color functions In this episode Una and Adam provide a color update, covering changes to the specs and new functions. Links RCS calc() tool → Apple Annie CSS Color Modules and Changes, Part I → Lea verou article on RCS for contrast → Una Kravets (co-host) | | Making the web more colorful ✨🎨 Web DevRel Unicorn face host of & 🎬 Adam Argyle (co-host) | | CSS DevRel; ; maker; punk; CSS/JS/UX addict; 💀🤘 /episode/index/show/thecsspodcast/id/31901867

081: Trigonometric Functions 06/20/2024

081: Trigonometric Functions In this episode Una and Adam share practical use cases, syntax and strategies for all the new math functions in CSS. From trig to algebra, they'll help you get a good idea on where and how these fit into your UI toolbelt. Links Ana Tudor tests your browser for CSS math function support → Great guide and overview from Daniel Wilson → layout pow() → Using Absolute Value, Sign, Rounding and Modulo in CSS Today → Time based animation → CSS type casting to numeric: tan(atan2()) scalars by Jane Ori → Open Props v2 type ramp prototype with pow() as taught by Dan Wilson in their post → CSS physics for transitions and keyframes with these math functions → Una Kravets (co-host) | | Making the web more colorful ✨🎨 Web DevRel Unicorn face host of & 🎬 Adam Argyle (co-host) | | CSS DevRel; ; maker; punk; CSS/JS/UX addict; 💀🤘 /episode/index/show/thecsspodcast/id/31789062

80: Animating to and from top-layer 06/13/2024

80: Animating to and from top-layer In this episode Una and Adam continue talking about dialogs and popovers, but this time it's all about animating them into and out of the top layer.. We'll be introducing starting-style, a new mode for transitioning discrete properties, and the overlay property for smooth entry and exit animations. Links: top-layer CSS spec → Four new CSS features for smooth entry and exit animations by Una → Using @starting-style and transition-behavior for enter and exit stage effects → Popover on MDN → :popover-open on MDN → Dialog and popover animated → Popover animated with nesting → What is the top layer? → overlay property on MDN → MDN demos → Una Kravets (co-host) | | Making the web more colorful ✨🎨 Web DevRel Unicorn face host of & 🎬 Adam Argyle (co-host) | | CSS DevRel; ; maker; punk; CSS/JS/UX addict; 💀🤘 /episode/index/show/thecsspodcast/id/31717797

79: Popover and Dialog 06/06/2024

79: Popover and Dialog The CSS Podcast is back, with an episode highlighting the popover API and dialog element! Learn what they can do, and when to use which when. Links Popover API lands in Baseline → Dialogs and popovers seem similar. How are they different? → Dialog dilemmas and modal mischief → Semantics and the popover attribute → Building a dialog component GUI Challenges → Una Kravets (co-host) | | Making the web more colorful ✨🎨 Web DevRel Unicorn face host of & 🎬 Adam Argyle (co-host) | | CSS DevRel; ; maker; punk; CSS/JS/UX addict; 💀🤘 /episode/index/show/thecsspodcast/id/31581112

78: Season 4 wrap! 12/06/2023

78: Season 4 wrap! 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 → Why isn’t my element stuck → Why isn’t my custom property the value I expect → How do I center a div → Why isn’t my animation glitching → Una Kravets (co-host) | | Making the web more colorful ✨🎨 Web DevRel Unicorn face host of & 🎬 Adam Argyle (co-host) | | CSS DevRel; ; maker; punk; CSS/JS/UX addict; 💀🤘 Subscribe to Chrome for Developers → /episode/index/show/thecsspodcast/id/28960928

77: Why isn't percentage working here? 11/28/2023

77: Why isn't percentage working here? In this episode, Una and Adam talk about percentage resolution for various properties like font-size, padding height and width. They break down and explain why percentages may not work or may not be what you expected. Links <percentage> → Understanding CSS Percentage → CSS Box Sizing Module Level 3 → Una Kravets (co-host) | | Making the web more colorful ✨🎨 Web DevRel Unicorn face host of & 🎬 Adam Argyle (co-host) | | CSS DevRel; ; maker; punk; CSS/JS/UX addict; 💀🤘 Subscribe to Chrome for Developers → /episode/index/show/thecsspodcast/id/28828978

76: Why isn't my element stuck where I wanted it to stick? 11/15/2023

76: Why isn't my element stuck where I wanted it to stick? 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 - sticky desperado - sticky slide - Una Kravets (co-host) | | Making the web more colorful ✨🎨 Web DevRel Unicorn face host of & 🎬 Adam Argyle (co-host) | | CSS DevRel; ; maker; punk; CSS/JS/UX addict; 💀🤘 Subscribe to Chrome for Developers YouTube → /episode/index/show/thecsspodcast/id/28657003

75: Why isn't my custom property the value I expect? 10/27/2023

75: Why isn't my custom property the value I expect? 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 → How custom property values are computed → A complete guide to custom properties → The big gotcha with custom properties → CodePen → Una Kravets (co-host) | | Making the web more colorful ✨🎨 Web DevRel Unicorn face host of & 🎬 Adam Argyle (co-host) | | CSS DevRel; ; maker; punk; CSS/JS/UX addict; 💀🤘 Catch more episodes → Subscribe to Chrome for Developers → /episode/index/show/thecsspodcast/id/28443572

74: How do I center a div? 10/11/2023

74: How do I center a div? 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 → Comparing grid and flex place-items and place-content → Centering in CSS: A Complete Guide → Centering examples from Una → Una Kravets (co-host) | | Making the web more colorful ✨🎨 Web DevRel Unicorn face host of & 🎬 Adam Argyle (co-host) | | CSS DevRel; ; maker; punk; CSS/JS/UX addict; 💀🤘 Catch more episodes → Subscribe to Google Chrome Developers → /episode/index/show/thecsspodcast/id/28289840

73: Why is my animation glitching? 09/21/2023

73: Why is my animation glitching? On this episode of the #CSSpodcast, we’re diving into how to deal with glitchy animations in your code base! Links: MDN transform-style - MDN backface-visibility - Una Kravets (co-host) | | Making the web more colorful ✨🎨 Web DevRel Unicorn face host of & 🎬 Adam Argyle (co-host) | | CSS DevRel; ; maker; punk; CSS/JS/UX addict; 💀🤘 Subscribe to Google Chrome Developers → /episode/index/show/thecsspodcast/id/28107731

72: Why does my gradient have muddy colors in the middle? 09/08/2023

72: Why does my gradient have muddy colors in the middle? 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 - various gradients in color spaces - modern css gradient tool - try color mix - color-mix() with white hover codepen - interpolation visualizer - Una Kravets (co-host) | | Making the web more colorful ✨🎨 Web DevRel Unicorn face host of & 🎬 Adam Argyle (co-host) | | CSS DevRel; ; maker; punk; CSS/JS/UX addict; 💀🤘 Catch more episodes → Subscribe to Google Chrome Developers → The CSS Podcast #CSSpodcast /episode/index/show/thecsspodcast/id/27982206

71: Why do I have layout shift? 08/31/2023

71: Why do I have layout shift? 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 - Optimizing CLS - CSS for Web Vitals - Una Kravets (co-host) | | Making the web more colorful ✨🎨 Web DevRel Unicorn face host of & 🎬 Adam Argyle (co-host) | | CSS DevRel; ; maker; punk; CSS/JS/UX addict; 💀🤘 Subscribe to Google Chrome Developers → /episode/index/show/thecsspodcast/id/27906822

70: Why is my image distorted? 08/25/2023

70: Why is my image distorted? 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 → Learn Responsive Images → Aspect Ratio → Demos → & Una Kravets (co-host) | | Making the web more colorful ✨🎨 Web DevRel Unicorn face host of & 🎬 Adam Argyle (co-host) | | CSS DevRel; ; maker; punk; CSS/JS/UX addict; 💀🤘 Catch more episodes → Subscribe to Google Chrome Developers → /episode/index/show/thecsspodcast/id/27851238

69: Why is it overflowing? 08/16/2023

69: Why is it overflowing? 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 → Everything you need to know → Check out → Una Kravets (co-host) | | Making the web more colorful ✨🎨 Web DevRel Unicorn face host of & 🎬 Adam Argyle (co-host) | | CSS DevRel; ; maker; punk; CSS/JS/UX addict; 💀🤘 Catch more episodes → Subscribe to Google Chrome Developers YouTube → The CSS Podcast #CSSpodcast /episode/index/show/thecsspodcast/id/27773439

68: Why isn't the margin applying? 08/09/2023

68: Why isn't the margin applying? 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 → CSS Margins → Learn more → Una Kravets (co-host) | | Making the web more colorful ✨🎨 Web DevRel Unicorn face host of & 🎬 Adam Argyle (co-host) | | CSS DevRel; ; maker; punk; CSS/JS/UX addict; 💀🤘 Catch more episodes → Subscribe to Google Chrome Developers YouTube → /episode/index/show/thecsspodcast/id/27704961

67: Why isn't z-index working? 08/01/2023

67: Why isn't z-index working? 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 → Una Kravets (co-host) | | Making the web more colorful ✨🎨 Web DevRel Host of & 🎬 Adam Argyle (co-host) | | CSS DevRel; ; maker; punk; CSS/JS/UX addict; 💀🤘 Catch more episodes → Subscribe to Google Chrome Developers YouTube → /episode/index/show/thecsspodcast/id/27626472

66: Season 3 recap & what’s next! 11/22/2022

66: Season 3 recap & what’s next! 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) | | Making the web more colorful ✨🎨 Web DevRel Unicorn face host of & 🎬 Adam Argyle (co-host) | | CSS DevRel; ; maker; punk; CSS/JS/UX addict; 💀🤘 Catch more episodes on YouTube→ Subscribe to Google Chrome Developers YouTube → The CSS Podcast #CSSpodcast /episode/index/show/thecsspodcast/id/25099461

65: Nesting 11/15/2022

65: Nesting 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 - Adam exploring the prototype implementation in Canary - @scope and @layer and nesting - Una Kravets (co-host) | | Making the web more colorful ✨🎨 Web DevRel Unicorn face host of & 🎬 Adam Argyle (co-host) | | CSS DevRel; ; maker; punk; CSS/JS/UX addict; 💀🤘 Catch more episodes → Subscribe to Google Chrome Developers YouTube → The CSS Podcast #CSSpodcast /episode/index/show/thecsspodcast/id/25024692

64: Subgrid 11/08/2022

64: Subgrid 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 - MDN - Smashing Magazine - Ahmad Shadeed on Subgrid - State of CSS (subgrid) - Full Bleed Subgrid demo - Una Kravets (co-host) | | Making the web more colorful ✨🎨 Web DevRel Unicorn face host of & 🎬 Adam Argyle (co-host) | | CSS DevRel; ; maker; punk; CSS/JS/UX addict; 💀🤘 Catch more episodes → Subscribe to Google Chrome Developers YouTube → The CSS Podcast #CSSpodcast /episode/index/show/thecsspodcast/id/24944976

63: Media query range syntax 11/02/2022

63: Media query range syntax Media query range syntax is a really nice addition. Links Polyfill: New syntax for range media queries: Una Kravets (co-host) | | Making the web more colorful ✨🎨 Web DevRel Unicorn face host of & 🎬 Adam Argyle (co-host) | | CSS DevRel; ; maker; punk; CSS/JS/UX addict; 💀🤘 Catch more episodes on YT → Subscribe to Google Chrome Developers → The CSS Podcast #CSSpodcast /episode/index/show/thecsspodcast/id/24877635

62: Color functions: An update 10/26/2022

62: Color functions: An update 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 → CSS Color Module Level 6 → Una Kravets (co-host) | | Making the web more colorful ✨🎨 Web DevRel Unicorn face host of & 🎬 Adam Argyle (co-host) | | CSS DevRel; ; maker; punk; CSS/JS/UX addict; 💀🤘 Catch more episodes → Subscribe to Google Chrome Developers → The CSS Podcast #CSSpodcast /episode/index/show/thecsspodcast/id/24808323

The CSS Podcast

TOPICS