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/4aY3OJz 

Time based animation → https://goo.gle/3x6Dm2K  

CSS type casting to numeric: tan(atan2()) scalars by Jane Ori → https://goo.gle/4bZyrj2 

Open Props v2 type ramp prototype with pow() as taught by Dan Wilson in their post → https://goo.gle/45uqikj 

CSS physics for transitions and keyframes with these math functions → https://goo.gle/3VltDgX 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; 💀🤘

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 and exit stage effects → https://goo.gle/452FG7p Popover on MDN → https://goo.gle/453xfss :popover-open on MDN → https://goo.gle/3x5XLVl Dialog and popover animated → https://goo.gle/3Kn1Ck7 Popover animated with nesting → https://goo.gle/3wW3Qns What is the top layer? → https://goo.gle/457rUjQ overlay property on MDN → https://goo.gle/3yKNRsT MDN demos → https://goo.gle/4c2eIyO 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 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-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; 💀🤘

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/47BcZPj 

How do I center a div → https://goo.gle/3RiOBLA  

Why isn’t my animation glitching → https://goo.gle/4a5fzPh 

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; 💀🤘

Subscribe to Chrome for Developers → https://goo.gle/ChromeDevs

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 @toolsday & Designing in the Browser 🎬 

Adam Argyle (co-host)

Twitter | Instagram | YouTube

@GoogleChrome CSS DevRel; @CSSWG; VisBug maker; punk; CSS/JS/UX addict; 💀🤘

Subscribe to Chrome for Developers → https://goo.gle/ChromeDevs

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 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; 💀🤘

Subscribe to Chrome for Developers YouTube → https://goo.gle/ChromeDevs

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.gle/45VwUHe  

CodePen → https://goo.gle/3SdMnyY  

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 → https://goo.gle/CSSpodcast 

Subscribe to Chrome for Developers → https://goo.gle/ChromeDevs

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 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 → https://goo.gle/CSSpodcast  

Subscribe to Google Chrome Developers → https://goo.gle/ChromeDevs

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/UX addict; 💀🤘

Subscribe to Google Chrome Developers → https://goo.gle/ChromeDevs

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/45GwS6t 

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 → https://goo.gle/CSSpodcast 

Subscribe to Google Chrome Developers → https://goo.gle/ChromeDevs 

The CSS Podcast

#CSSpodcast