unakravets

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

Where do scrollbars go, inside or outside the box? In this episode Una and Adam answer that and much more in their discussion of the CSS box model. Everything in CSS starts as a box, and while that’s a straight forward concept to initially think about, it can get complex quite quickly. Not only do boxes surround elements, but letters in a sentence each have a box too. How many boxes are there!? Lots. Lots of boxes. 

 

Links

Box Model CSS Spec: https://goo.gle/39KwDud 

Adam’s Box Model CodePen: https://goo.gle/38JFZ8n 

CSS Tricks on the Box Model: https://goo.gle/3aM4a7p

Check out the Instagram: https://goo.gle/2W97OEg