googlechromedevelopers

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 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 explain a non-CSS property, but very relevant front-end UI property, called inert. It's a way to have a visually guarded part of the UI also be guarded for keyboard and screen reader users.

Links

Inert spec - https://goo.gle/3SXid0C 

MDN - https://goo.gle/3rK1Ybd 

Chrome Developers: Introducing Inert - https://goo.gle/3CLygZE 

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

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

Welcome to the DevTools Mini Series for The CSS Podcast. On this episode, Una Kravets and Adam Argyle are joined by Jecelyn Yeen to discuss an overview of color and shared tips.

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

We’ve reached the end of season 2 of the CSS Podcast. In this closing episode, we recap every episode by sharing our favorite tips and learnings from the last few months!

Episodes reminisced
E30 → Lists
E31 → @rules
E32 → Page Media Queries
E33 → Preference Media Queries
E34 → Overflow
E35 → Background
E36 → Text & Typography
E37 → Cursors & Pointers
E38 → N-Match Notation
E39 → Paths, Shapes, Clipping and Masking
E40 → @font-face
E41 → Transforms
E42 → Snap Points
E43 → Containment
E44 → Transitions
E45 → @scroll-timeline
E46 → Custom Properties
E47 → :is(), :where(), and @nest
E48 → Touch Interaction
E49 → Accessibility
E50 → Inherit, initial, inset, and revert
E51 → Styling SVG
E52 → Counters & @counter-style

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

Count on The CSS Podcast to cover counters. Una and Adam teach all the ways to create, reset, and update counters. Use them for lists, games and more!

Links

Counters Level 3 → https://goo.gle/3f2BP18 

Pure CSS Games Collection → https://goo.gle/3l0wrQe 

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

CSS and SVG are very intertwined, and you can create a lot of unique effects by combining the two. This episode dives into a few CSS + SVG tips and tricks, including where and how to use SVG on your page, icon systems, color theming, adding animations, filter effects, and more!

Links

Solved with CSS: Colorizing SVG → https://goo.gle/3x0Uilb

SVGOMG  → https://goo.gle/3hS6ksJ

SVG spec  → https://goo.gle/3wVgRYe

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

This episode is about the very available CSS values inherit, initial, unset and revert. We'll help explain what they are, what they do and when to use them.

Links

CSS Tricks Article → https://goo.gle/2U5PxJw 

Quirksmode Article → https://goo.gle/2TY80rz 

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

Today we are breaking down accessibility related styling choices to ensure a better user experience for all of your users. These include focus visibility, keyboard navigation, and more! 

Links

#lintHTMLwithCSS - https://goo.gle/3dSMIlU 

CSS Speech Level 1 - https://goo.gle/3xrg3vc 

Media Queries Level 5 - https://goo.gle/3qUcBXz

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