csspodcast

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

 

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 🎬 

 

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

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

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 🎬 

 

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

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 🎬 

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

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

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

 The CSS Podcast

#CSSpodcast

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 & 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 YouTube → https://goo.gle/ChromeDevs   

 

The CSS Podcast

#CSSpodcast

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 

 

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

 

The CSS Podcast

#CSSpodcast

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

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

 

The CSS Podcast

#CSSpodcast

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)

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

: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 → https://goo.gle/3yRv4sZ 
• Quantity Queries for CSS → https://goo.gle/3a4NPwT 

 

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

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 at CSS Day 2022 - https://goo.gle/3LtfxVg 

Bramus's blog - https://goo.gle/3xEj2CM 

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

 

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

#CSSpodcast

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

 

Jecelyn Yeen

Twitter | Facebook | YouTube

Developer advocate @ChromeDevTools 📐🤩

 

The CSS Podcast

#CSSpodcast

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.

 

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

 

Jecelyn Yeen

Twitter | Facebook | YouTube

Developer advocate @ChromeDevTools 📐🤩

 

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.

 

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

 

Jecelyn Yeen

Twitter | Facebook | YouTube

Developer advocate @ChromeDevTools 📐🤩

 

The CSS Podcast

#CSSpodcast