chromedevelopers

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

: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

Container queries (also known as @container) are a new entrypoint for truly component-based responsive design. In this episode, Adam and Una will walk you through how to use them, what browser support looks like, and upcoming features that will give you even more control over your responsive interfaces!

Links

• CQ + :has() → https://goo.gle/3ymiwJS
• MDN Docs → https://goo.gle/3ogyIrp

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

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

Today we touch on touch interaction. Covering CSS's ability to change a user's touch experience with properties like touch-action, scroll-behavior, user-select and more.

Links

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

Spec - https://goo.gle/3dm4opF 

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, Adam and Una explore some CSS syntactic sugar! They discuss the :is and :where functions, how they differ, and how they’re paving the way for nesting. 

Links

Adam's post on web.dev → https://goo.gle/3qhYifl 

MDN :is() → https://goo.gle/3qgU0Vf 

Forgiving selector parsing → https://goo.gle/3xLTYHL 

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

Custom properties, aka CSS variables, are runtime dynamic variables which allow you to store loose or typed values. They're free, super fast, improve code legibility, unlock powers, are reachable with JavaScript, animateable, overall super fun and, well, kind of complex.

Links

Module Level 1 → https://goo.gle/3wtADL1 

82% of developers get this 3 line CSS quiz wrong → https://goo.gle/2U8oTPR 

A user’s guide to CSS variables → https://goo.gle/3zlmscV 

Locally Scoped CSS Variables: What, How, and Why → https://goo.gle/2KGESwR 

GitHub → https://goo.gle/3iOiVOa 

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 we deep dive the experimental Scroll Animations spec to bring you the breakdown on @scroll-timeline powered CSS animation. Learn about scroll-linked animations vs scroll-triggered animations and how to orchestrate scroll interactions with elements of the page. 

Links

Scroll animations level 1 draft →https://goo.gle/3pvWX49 

Polyfill → https://goo.gle/3x8CQvw 

GUI Challenges - Tabs → https://goo.gle/34YYl5J 

Bramus's talk → https://goo.gle/2TPs7HU 

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 it's all about transitions. What you can and can't transition, it's limits, and it's super powers. We'll finish up with ways to trigger transitions and a few tips and tricks.

Links

CSS Transitions https://goo.gle/3vIDi31 

Cont. https://goo.gle/3pcpueY 

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

The CSS contain property can give you some serious performance gains by adjusting how and when the browser renders elements. In this episode, we go over all the different types of containment, and where you might use them.

Links

MDN doc on containment → https://goo.gle/3fRejEd 

Content-visibility → https://goo.gle/3wBMB52 

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