The CSS Podcast

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.

Episodes

October 3, 2024 42 mins

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

Mark as Played
September 26, 2024 46 mins

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

Mark as Played
September 19, 2024 41 mins

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

Mark as Played
September 12, 2024 23 mins

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 

...

Mark as Played
August 22, 2024 38 mins

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 Dayhttps://goo.gle/4ds8g5B 

Una's Anchor Tool → https://goo.gle/3yDYDSd 

Mark as Played
August 8, 2024 8 mins

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 🎬 

Mark as Played
August 1, 2024 16 mins

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/46u...

Mark as Played
July 11, 2024 12 mins

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

Mark as Played
July 3, 2024 36 mins

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

Mark as Played

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

Mark as Played
June 20, 2024 43 mins

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 

Mark as Played
June 13, 2024 31 mins

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

Mark as Played
June 6, 2024 19 mins

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/3Vl3N...

Mark as Played
December 6, 2023 19 mins

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 

Mark as Played
November 28, 2023 15 mins

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

Mark as Played

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

Mark as Played

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

Mark as Played
October 11, 2023 17 mins

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

Mark as Played
September 21, 2023 25 mins

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

Mark as Played

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 

Mark as Played

Popular Podcasts

    Stuff You Should Know

    If you've ever wanted to know about champagne, satanism, the Stonewall Uprising, chaos theory, LSD, El Nino, true crime and Rosa Parks, then look no further. Josh and Chuck have you covered.

    NFL Daily with Gregg Rosenthal

    Gregg Rosenthal and a rotating crew of elite NFL Media co-hosts, including Patrick Claybon, Colleen Wolfe, Steve Wyche, Nick Shook and Jourdan Rodrigue of The Athletic get you caught up daily on all the NFL news and analysis you need to be smarter and funnier than your friends.

    Dateline NBC

    Current and classic episodes, featuring compelling true-crime mysteries, powerful documentaries and in-depth investigations.

    The Clay Travis and Buck Sexton Show

    The Clay Travis and Buck Sexton Show. Clay Travis and Buck Sexton tackle the biggest stories in news, politics and current events with intelligence and humor. From the border crisis, to the madness of cancel culture and far-left missteps, Clay and Buck guide listeners through the latest headlines and hot topics with fun and entertaining conversations and opinions.

    The Joe Rogan Experience

    The official podcast of comedian Joe Rogan.