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
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)
Making the web more colorful ✨🎨 Web DevRel @googlechrome Unicorn face host of @toolsday & Designing in the Browser 🎬
Adam Argyle (co-host)
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)
Making the web more colorful ✨🎨 Web DevRel @googlechrome Unicorn face host of @toolsday & Designing in the Browser 🎬
Adam Argyle (co-host)
Twitter |...
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)
Making the web more colorful ✨🎨 Web DevRel @googlechrome Unicorn face host of @toolsday & Designing in the Browser 🎬
Adam Argyle (co-host)
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)
Making the web more colorful ✨🎨 Web DevRel @googlechrome Unicorn face host of @toolsday & Designing in the Browser 🎬
Adam Argyle (co-host)
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 ...
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)
Making the web more colorful ✨🎨 Web DevRel @googlechrome Unicorn face host of @toolsday & Designing in...
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...
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)
Making the web more colorful ✨🎨 Web DevRel @googlechrome Unicorn face host of @toolsday & Designi...
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)
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)
Making the web more colorful ✨🎨 Web DevRel @googlechrome Unicorn face host of @toolsday & Designing in the Br...
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)
Making the web more colorful ✨🎨 Web DevRel @g...
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
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
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)
Making the web more colorful ✨🎨 Web DevRel @googlechrome Unicorn face host o...
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)
Making the web more colorful ✨🎨 Web DevRel &...
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)
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...
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
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 ? ...
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...
Popular Podcasts
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.
Current and classic episodes, featuring compelling true-crime mysteries, powerful documentaries and in-depth investigations.
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.
This is what the news should sound like. The biggest stories of our time, told by the best journalists in the world. Hosted by Michael Barbaro. Twenty minutes a day, five days a week, ready by 6 a.m.
If you can never get enough true crime... Congratulations, you’ve found your people.