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) Twitter | Instagram | YouTube Making the web more colorful ✨🎨 Web DevRel @googlechrome Unicorn face host of @toolsday & Designing in the Brows...
Oct 03, 2024•43 min
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 → https://goo.gle/3Uw31up Video Course direct link: https://goo.gle/learn-scroll-driven-animations Adam's Demos: scroll() the hue wheel...
Sep 26, 2024•47 min
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 → https://goo.gle/4aHY7zo Quick intro to View Transitions (Google I/O 2023 video) → https://goo.gle/3ZieRLp What's new in View Transitions? (Google I/O 2024 vid...
Sep 19, 2024•42 min
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 → https://goo.gle/3WVhSi6 state queries syntax → https://goo.gle/3T2gI33 explainer → https://goo.gle/3XevW7x Intent To Prototype → https://goo.gle/3Au8rOY Scroll Snap Events → http...
Sep 12, 2024•23 min
In this episode Una and Adam explain anchor positioning and all its amazing features. Resources: Introducing the CSS anchor positioning API → https://goo.gle/3SWrvM5 CSS anchor positioning → https://goo.gle/4dwgmd9 Tab’s talk from CSS Day → https://goo.gle/4ds8g5B Una's Anchor Tool → https://goo.gle/3yDYDSd 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-...
Aug 22, 2024•38 min
In this episode Una and Adam catch you up to the latest syntax features of CSS nesting. Resources: Episode 47 → https://goo.gle/3SvM9T4 Episode 65 → https://goo.gle/3ygA7X1 CSS Nesting Update → https://goo.gle/3WHCRpK 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; ...
Aug 08, 2024•8 min
In this episode Una and Adam cover the linear() CSS easing function that can create bounce and spring effects. Resources: Ep 22 on Animation → https://goo.gle/4frnp8y linear() generator → https://goo.gle/46xs2JZ Complex animation curves in CSS with linear() → https://goo.gle/4ftm0Oz Open Props premade spring and bounce variables → https://goo.gle/46uaGOc Una Kravets (co-host) Twitter | Instagram | YouTube Making the web more colorful ✨🎨 Web DevRel @googlechrome Unicorn face host of @toolsday &a...
Aug 01, 2024•16 min
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 → https://goo.gle/3zvwixd soft breaks → https://goo.gle/4cXKLAq 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 (...
Jul 11, 2024•13 min
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 → https://goo.gle/4cID6pE Piccali → https://goo.gle/4ePKJMG Ahmad Shadeed → https://goo.gle/4bsk85F The Looper → https://goo.gle/3yKmXkI Una Kravets (co-host) Twitter | Instagram | YouTube Making the web more colorful ✨🎨 Web DevRel @googlechrome Unicorn face host of @toolsday & Designing in th...
Jul 03, 2024•36 min
In this episode Una and Adam provide a color update, covering changes to the specs and new functions. Links RCS calc() tool → https://goo.gle/4cRRJHt Apple Annie CSS Color Modules and Changes, Part I → https://goo.gle/3xtTr2A Lea verou article on RCS for contrast → https://goo.gle/3L3x5YF 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 | Ins...
Jun 27, 2024•18 min
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 → https://goo.gle/4cmBm5r Great guide and overview from Daniel Wilson → https://goo.gle/4enKgBe layout pow() → https://goo.gle/3RlvAsI Using Absolute Value, Sign, Rounding and Modulo in CSS Today → https://goo.gle...
Jun 20, 2024•43 min
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 → https://goo.gle/4c2elUW Four new CSS features for smooth entry and exit animations by Una → https://goo.gle/3KpyB7e Using @starting-style and transition-behavior for enter ...
Jun 13, 2024•31 min
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 → https://goo.gle/3Vo2dIs Dialogs and popovers seem similar. How are they different? → https://goo.gle/3wXD1z5 Dialog dilemmas and modal mischief → https://goo.gle/3R9nmDE Semantics and the popover attribute → https://goo.gle/3Vl3NuM Building a dialog component GUI Challenges → https://goo.gle/4c0YFkK Una Kravets (co-hos...
Jun 06, 2024•20 min
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/...
Dec 06, 2023•20 min
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 → https://goo.gle/47XtWU1 Understanding CSS Percentage → https://goo.gle/3RhLJzG CSS Box Sizing Module Level 3 → https://goo.gle/46FRF9T Una Kravets (co-host) Twitter | Instagram | YouTube Making the web more colorful ✨🎨 Web DevRel @googlechrome Unicorn face host of @toolsda...
Nov 28, 2023•15 min
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 h...
Nov 15, 2023•10 min
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.gl...
Oct 27, 2023•20 min
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 ...
Oct 11, 2023•17 min
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...
Sep 21, 2023•26 min
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/...
Sep 08, 2023•16 min
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...
Aug 31, 2023•12 min
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 @too...
Aug 25, 2023•18 min
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 → https://goo.gle/441OGaH Everything you need to know → https://goo.gle/4434Ctj Check out → https://goo.gle/3YrJDiw Una Kravets (co-host) Twitter | Instagram | YouTube Making the web mor...
Aug 16, 2023•15 min
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 🎬 ...
Aug 09, 2023•16 min
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 🎬 Ad...
Aug 01, 2023•17 min
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→ htt...
Nov 22, 2022•36 min
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 & Des...
Nov 15, 2022•32 min
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 Un...
Nov 08, 2022•10 min
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...
Nov 02, 2022•6 min
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) Twitte...
Oct 26, 2022•13 min
