The CSS Podcast

The CSS Podcast

Cascading Style Sheets (CSS) is the web’s core styling language. For web developers, It’s one of the quickest technologies to get started with, but one of the hardest to master. Follow Una Kravets and Adam Argyle, Developer Advocates from Google, who gleefully breakdown complex aspects of CSS into digestible episodes covering everything from accessibility to z-index.

Episodes

August 3, 2021 35 min

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

Share
Mark as Played

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

Share
Mark as Played
July 20, 2021 32 min

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 (c...

Share
Mark as Played

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 & Designi...

Share
Mark as Played
July 6, 2021 31 min

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

Share
Mark as Played
June 29, 2021 25 min

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

Share
Mark as Played
June 22, 2021 33 min

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

Share
Mark as Played
June 15, 2021 27 min

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

Share
Mark as Played
June 8, 2021 22 min

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 

Br...

Share
Mark as Played
June 1, 2021 26 min

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

Share
Mark as Played
May 26, 2021 14 min

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

Share
Mark as Played
May 11, 2021 16 min

In this episode we're guiding scroll areas into their peaceful resting places, maintaining alignment, keeping visual harmony, and improving the overall experience with the content.

 

Links

Scroll Snap Level 1 draft → https://goo.gle/2R9hUow 

overscroll-behavior → https://goo.gle/3o7vLYE 

scroll-behavior → https://goo.gle/3uKvkWU 

 

Una Kravets (co-host)

Twitter | Instagram | YouTube

Making the web more colorful ✨🎨  Web...

Share
Mark as Played
May 4, 2021 30 min

In this episode we enter the 3rd dimension with CSS, placing and manipulating objects in 3D space with the transform property. 2D and 3D transforms are spectacular ways to animate and create a sense of depth in a design, follow along for how it all works.

 

Links

CSS Transforms Module Level 1 → https://goo.gle/2RsETdW 

CSS Transforms Module Level 2 → https://goo.gle/3tdGeCF 

Chaining transforms → https://goo.gle/3nKMKQp 

 

Una Krav...

Share
Mark as Played
April 27, 2021 23 min

In this episode Una and Adam talk about font adjustments when being used within @font-face. When fonts are loaded, there's an opportunity to provide default values and fine tunings.

Links @font-face on MDN → https://goo.gle/2S3DAmp  CSS Fonts Level 4 → https://goo.gle/3sGwO2s 

The CSS Podcast #CSSpodcast

Share
Mark as Played

Paths, shapes, clipping, masking, oh my! There’s so much you can do with CSS shapes—from creating transition effects to creating interesting and organic typographic layouts. In this episode we dive in to how to wrangle shape effects in CSS.

?

Shapes Level 1 ? https://goo.gle/3gkJAkG?

Shapes Level 2 ?? https://goo.gle/3amJLIk?

Masking Level 1 ?? https://goo.gle/3nb6Bb5?

Clippy tool ? https://goo.gle/3sIM0w9?

clip-path transitions ? ...

Share
Mark as Played
April 13, 2021 16 min

Welcome back to The CSS Podcast, where we cover all things CSS from accessibility to c-index. Today, Una and Adam will discuss a micro syntax for pseudo class notification when working with nth-child.?

?

Selectors level 3 ?? https://goo.gle/3dWB48G?

Useful nth-child recipes ? https://goo.gle/3e102DE?

Nth-child syntax ? https://goo.gle/328nA4b?

Quantity queries ? https://goo.gle/3a4NPwT?

Solved with CSS! Nth-tricks ? https://goo.gle...

Share
Mark as Played
April 6, 2021 17 min

What do mouse pointers, potatoes, and your fingers have in common? They can all interact with a screen! With CSS we can define how active our web boxes are, which areas are interactive, and what style the cursor should be. Maybe that means your mouse arrow becomes an animated magic wand, or maybe not. Get ready for a fun episode, where things get a bit goofy.

LinksPointer events → https://goo.gle/39HFYF8A Mind-Bending Discovery → h...

Share
Mark as Played
March 30, 2021 30 min

In this episode we cover typography on the web from your CSS. From font properties to word breaking. Also, Adam gets thrown off and amazed at how dynamic the text underline property is and revels in the difference between small caps and petite caps.

Links

MDN Text Fundamentals → https://goo.gle/2O4Fh13Text Decoration 3 → https://goo.gle/3u7M2yK

The CSS Podcast#CSSpodcast

Share
Mark as Played
March 23, 2021 24 min

In this episode we cover all the ways to style an element's background: using images, colors, gradients and more.

 

Links

CSS backgrounds-3 → http://goo.gle/2P0DGJE

CSS Tricks on backgrounds → http://goo.gle/2ODPCRY

The CSS Podcast

#CSSpodcast

Share
Mark as Played
March 16, 2021 18 min

In today's episode we cover overscroll and all the ways to handle content that's bursting at the seams. The web has a natural tendency to show overflowing content, so let's study our options when it comes to wrangling those pesky misbehavers.

LinksText-overflow → http://goo.gle/38uDGbXCSS Overflow Module → http://goo.gle/2N7KsNg

The CSS Podcast#CSSpodcast

Share
Mark as Played

Popular Podcasts

  • If you can never get enough true crime... Congratulations, you’ve found your people.

  • Dateline NBC

    Current and classic episodes, featuring compelling true-crime mysteries, powerful documentaries and in-depth investigations.

  • Stuff You Should Know

    If you've ever wanted to know about champagne, satanism, the Stonewall Uprising, chaos theory, LSD, El Nino, true crime and Rosa Parks then look no further. Josh and Chuck have you covered.

  • Morbid: A True Crime Podcast

    It’s a lighthearted nightmare in here, weirdos! Morbid is a true crime, creepy history and all things spooky podcast hosted by an autopsy technician and a hairstylist. Join us for a heavy dose of research with a dash of comedy thrown in for flavor.

  • The Bobby Bones Show

    Listen to 'The Bobby Bones Show' by downloading the daily full replay.

Advertise With Us
Music, radio and podcasts, all free. Listen online or download the iHeartRadio App.

Connect

© 2021 iHeartMedia, Inc.