The CSS Podcast

By The CSS Podcast

Listen to a podcast, please open Podcast Republic app. Available on Google Play Store.


Category: Technology

Open in Apple Podcasts


Open RSS feed


Open Website


Rate for this podcast

Subscribers: 73
Reviews: 0
Episodes: 66

Description

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.

Episode Date
66: Season 3 recap & what’s next!
36:21

Listen to Adam and Una recap all of the exciting landings they talked about in 2022 in this end-of-season recap. If you missed the others, don’t miss this one!

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 YouTube→ https://goo.gle/CSSpodcast

Subscribe to Google Chrome Developers YouTube → https://goo.gle/ChromeDevs

 The CSS Podcast

#CSSpodcast

Nov 22, 2022
65: Nesting
31:59

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

Nov 15, 2022
64: Subgrid
09:43

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

Nov 08, 2022
63: Media query range syntax
05:57

Media query range syntax is a really nice addition. 

 

Links

 

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

Nov 02, 2022
62: Color functions: An update
13:14

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

Oct 26, 2022
61 :has()
23:06

: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

 

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

Oct 18, 2022
60: Inert
07:31

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

Oct 11, 2022
59: Container queries
15:45

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

Oct 06, 2022
58: Cascade layers
18:08

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

Sep 20, 2022
57: DevTools Mini Series - Interaction
14:32

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

Dec 29, 2021
56: DevTools Mini Series - Accessibility
13:49

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

Dec 22, 2021
55: DevTools Mini Series - Layout
17:10

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

Dec 15, 2021
54: DevTools Mini Series - Color
14:20

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

Dec 08, 2021
53: Season 2 wrap up
35:45

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

Aug 03, 2021
52: counters and @counter-style
26:48

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

Jul 27, 2021
51: Styling SVG in CSS
32:54

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

Jul 20, 2021
50: inherit, initial, unset, and revert
11:31

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

Jul 13, 2021
49: Accessibility
31:38

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

Jul 06, 2021
48: Touch interaction
25:54

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

Jun 29, 2021
47: :is(), :where(), & nesting
33:04

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

Jun 22, 2021
46: Custom properties
27:29

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

Jun 15, 2021
45: Scroll timeline
22:26

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

Jun 08, 2021
44: Transitions
26:18

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

Jun 01, 2021
43: Containment
14:51

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

May 26, 2021
42: Snap points
16:49

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

May 11, 2021
41: Transforms
30:24

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

May 04, 2021
40: @font-face
23:52

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

Apr 27, 2021
39: Paths, shapes, clipping and masking
33:20

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 → https://goo.gle/3tGx96I 

CSS Masking → https://goo.gle/3goEcNt 

 

The CSS Podcast

#CSSpodcast

Apr 20, 2021
38: N-match Notation
16:22

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/3g65Wq0 

 

The CSS Podcast

#CSSpodcast

Apr 13, 2021
37: Cursors and Pointers
17:09

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.

Links
Pointer events → https://goo.gle/39HFYF8
A Mind-Bending Discovery → https://goo.gle/31Rm3iA

The CSS Podcast
#CSSpodcast

Apr 06, 2021
36: Text and Typography
30:12

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/2O4Fh13
Text Decoration 3 → https://goo.gle/3u7M2yK

The CSS Podcast
#CSSpodcast

Mar 30, 2021
35: Background
24:46

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

Mar 23, 2021
34: Overflow
18:20

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.

Links
Text-overflow → http://goo.gle/38uDGbX
CSS Overflow Module → http://goo.gle/2N7KsNg

The CSS Podcast
#CSSpodcast

Mar 16, 2021
33: Preference Media
15:58

In this episode we narrow our focus on user-preference-based media queries, which enable you to create personalized experiences based on your users custom settings and needs.

Links
Media Queries 5 → https://goo.gle/306lZea

The CSS Podcast
#CSSpodcast

Mar 11, 2021
32: Page Media
21:53

In this episode we talk about page media queries and all the ways you can pivot your styles based on device capabilities, viewport size, etc. 

 

Links

Media Queries → http://goo.gle/2MhYfR2

Scripting → http://goo.gle/2Mdan5E

The 'display-mode' media feature → http://goo.gle/2NoFr3c

Prefers-* Security and Privacy → http://goo.gle/3kfwUM0

CSS Color Adjustment → http://goo.gle/3qLkduJ

 

The CSS Podcast

#CSSpodcast

Mar 02, 2021
31: @rules
20:50

In this episode we talk about CSS @rules and all the different customizations you can make to fonts, encoding, animations, Houdini, and more. 

Links
At-rules → http://goo.gle/3uvvRwb
CSS Conditional Rules Module → http://goo.gle/37Bgf02
@property → https://goo.gle/3upuMpB
Media Queries → https://goo.gle/2Nl2VGp
CSS Fonts → http://goo.gle/3dB2uSU

The CSS Podcast
#CSSpodcast

Feb 23, 2021
30: Lists
16:26

In this Season 2 kickoff episode we talk about lists; their bullets/markers, styleability and overall featureset. List-en closely 🤓

Links
CSS Lists and Counters Module → http://goo.gle/2LlRhtS
Custom bullets with CSS → http://goo.gle/3rol0BL
CSS Lists, Markers, And Counters→ http://goo.gle/3cHa5yP
CSS Counter Grid → https://goo.gle/3awKJkp

The CSS Podcast
#CSSpodcast

Feb 16, 2021
29: Houdini Series: Layout
16:34

In this episode, we get a little more experimental as we continue the Houdini series and discuss the Layout Worklet, also sometimes referred to as the Houdini Layout API. The Layout API enables developers to write their own layout algorithms.

For more about Houdini worklets, check out our last episode on the Paint Worklet for an overview → https://goo.gle/3mG6BPc

Links

The Layout API → https://goo.gle/3gspEdI

Masonry Layout Example by @iamvdo → https://goo.gle/37pRint

Dec 09, 2020
28: Houdini Series: Paint
29:29

In this episode, we continue the Houdini series and enter worklet land! We go over the Paint Worklet, an API that enables developers to define canvas-like custom painting functions that can be used directly in CSS as backgrounds, borders, masks, and more.

Links

CSS Paint API → https://goo.gle/39bWvBV

MDN Docs on CSS Painting API → https://goo.gle/3m3e1M1

Worklet Reference → https://goo.gle/3980Equ

Dec 02, 2020
27: Houdini Series: Typed OM
21:17

In this episode we go over the TypedOM, a new API for parsing, converting, creating and managing CSS. It's typed, as the name suggests, and these typings not only help developers find bugs, they can make properties animateable natively in the engine. 

Links

MDN Typed OM Reference → https://goo.gle/3n2FrC9

Spec → https://goo.gle/32fq94O

caniuse attributeStyleMap →  https://goo.gle/3leR0Fu

caniuse computedStyleMap →  https://goo.gle/3p40ENy

Nov 18, 2020
26: Houdini Series: Properties & Values
21:20

In this episode we introduce Houdini! We start by talking about our hooks into the layout engine and CSS parser, so we can connect our custom functionality with some CSS authored by a designer or developer. These hooks are called Houdini Properties & Values.

Links

Properties and Values Spec → https://goo.gle/2HZ6Aad

Value Definitions Spec → https://goo.gle/2HZCCTy

Houdini @property → https://goo.gle/3eyFimW

Nov 11, 2020
25: Season 1 Wrap Up
52:58

In this closing episode, we do a whirlwind recap of our entire first season! We go over every episode, from the box model to z-index to animations and functions and color. Listen as we recount our favorite tips and tricks and discuss what we learned in the process of making this podcast.

Sep 16, 2020
24: Blend Modes
18:00

Today we are talking about CSS blend modes! Blend modes are super fun and allow you to specify how you want elements to interact in terms of their overlapping pixel values on the page.

Links:

mix-blend-mode → https://goo.gle/3m5L9mP 

Isolation: Cascading Style Sheets → https://goo.gle/2GIDjiX 

Sep 09, 2020
23: Filters
26:20

In this episode, we’re talking about CSS filters! We can alter the pixels of our web apps in similar ways to our favorite design tools. From recreating Instagram filter effects, to blurring background for better legibility, we dive deep into what CSS and filters can do.

Links:

Filter Effects Module Level 1 → https://goo.gle/34SPJ1D 

Backdrop Filter → https://goo.gle/3hJTMRz 

CSSGram → https://goo.gle/2EPDOad 

Custom & Instagram photo filters → https://goo.gle/31PhaYi 

Contrast Swap technique → https://goo.gle/2G9LpRh 

feColorMatrix → https://goo.gle/34UKw9u 

Shaders → https://goo.gle/32PJ2uR 

Sep 02, 2020
22: Animation
38:49

In this episode, we’re talking about CSS animations. With CSS animations a developer creates a set of keyframes, and then uses a variety of animation properties to describe how the element moves through each of the possible keyframes. 

Links:

Animations Level 1 Spec → https://goo.gle/2DhV0V2 

Easing Level 1 Spec → https://goo.gle/3kWoWap 

Scroll-Linked Animations Draft Spec → https://goo.gle/39VQV4N 

Cubic-Bezier Tool → https://goo.gle/2Q5xj5i 

Debugging Animations → https://goo.gle/3ayI2yD 

Rainbow Button → https://goo.gle/3214e0t 

Complete Easing Functions → https://goo.gle/3gaaiJ4 

Aug 26, 2020
21: Gradients
30:38

In this episode gradients take the stage as we share syntax secrets, tips and tricks, and probably teach you about repeating-conic-gradient. By the end, you’ll be savvy with color stops, transition hints, and all the ways to interpolate color in your design.

Links:

Spec Level 3 → https://goo.gle/3h8cRN7 

Spec Draft Level 4 → https://goo.gle/3iPmDUE 

Lea’s Pattern Gallery → https://goo.gle/3j4XEwX

Lea’s Cicada Principle Article → https://goo.gle/2FyeWnr 

Aug 19, 2020
20: Functions
39:59

In this episode we talk about the runtime dynamic side of CSS, commonly recognized as a CSS function. Today, in similar fashion to other episodes, we’ll be doing a massive overview of all the CSS functions, to be later deep dived. 

Links:

CSS Tricks Guide to CSS Functions → https://goo.gle/2XRb7Ah 

CSS Variables → https://goo.gle/2XRb2fX 

Functional Notations Spec → https://goo.gle/3gJwavQ 

Cubic Bezier Generator → https://goo.gle/30LiDhG 

Billion Laughs Attack → https://goo.gle/2XUxjtg 

Aug 12, 2020
19: Z-Index and Stacking Context
19:49

In today’s episode, we’re talking about z-index and stacking context. This is a pretty in-depth topic, but it's something that we see all the time and it can definitely bite if you aren’t aware of what’s going on.

Links:

CSS Animations Level 1 → https://goo.gle/2DhV0V2 

Scroll-linked Animations 1 → https://goo.gle/39VQV4N 

15 thoughts on What's the Maximum Z-Index? → https://goo.gle/31ipKxh 

What No One Told You About Z-Index → https://goo.gle/3fqTLjl 

Aug 05, 2020
18: Focus
18:54

Today we discuss: focus! Focus  is something we regularly deal with when writing styles and is also very tied to markup and attributes like tabindex, so we’ll be discussing all of those things in this episode!

Links:

User Action Pseudo-classes → https://goo.gle/3jNSHcL 

HTML Standard → https://goo.gle/3g7FzNr 

Keyboard control → https://goo.gle/2X1rNEE  

Roving tabindex -- A11 → https://goo.gle/3jOZenQ 

Jul 30, 2020
17: Shadows
21:34

Today we’re talking about shadows! Box shadows, drop shadows, text shadows, and everything in between. Shadows can exist all over our UIs without us even realizing it because sometimes, they just look like borders.

 

box-shadow spec →  https://goo.gle/32JVdL4 

text-shadow spec → https://goo.gle/2ZMdiGo 

Sass pixel art → https://goo.gle/3hsjQjp 

Any image to CSS → https://goo.gle/2WKnm0L 

Easing Box Shadows → https://goo.gle/2BjU6qh 

Codepen → https://goo.gle/2ZLUDL2 

3D Text → https://goo.gle/2ZNO8ar 

Jul 22, 2020
16: Borders
24:46

Today we’re talking about borders! And while this sounds relatively simplistic, borders in CSS can actually get pretty complex very quickly. It’s not just color and style that you can adjust, but also also border images, where you control how the image repeats itself and what slice of the image you want to show.

Links:

CSS backgrounds and borders → https://goo.gle/3hbosdZ

CSS logical properties and values → https://goo.gle/308szAl 

Fancy border radius generator → https://goo.gle/3fH3SBT 

Jul 15, 2020
15: Pseudo Selectors
36:46

In this episode we break down functional and regular pseudo selectors, CSS’s special hook into encapsulated element states. We can’t control them, but we can leverage them to provide rich interactive feedback from our interfaces.

 

Links:

Selectors Level 4 → https://goo.gle/2ZiJLmt 

a:link vs. a styling demo → https://goo.gle/2NGwWgd 

Hacking Visited for Una’s Blog → https://goo.gle/3eIo0TC 

:focus-within from Next Generation Web Styling → https://goo.gle/3gaXSRE 

:focus-visible explainer → https://goo.gle/2VslHMA 

Una’s Pure CSS Whackamole → https://goo.gle/2VxfhvX 

Una’s Pure CSS Tick Tack Toe → https://goo.gle/2ZzTCob 

Pure CSS Games Post → https://goo.gle/2VslTvi 

Empty Demo with Custom Properties → https://goo.gle/31tUlJS 

:blank naming → https://goo.gle/2Vukm81 

Jul 01, 2020
14: Pseudo Elements
20:08

::after and ::before? Pssh, do you know about ::first-letter, ::spelling-error, and ::backdrop? In this episode, we dive into the world of pseudo-elements and discuss how to use these unique declarations that enable styling specific parts of some selected HTML. 

Links

CSS Pseudo-Elements Module Level 4 → https://goo.gle/2BxRB3q 

CSS Shadow Parts → https://goo.gle/2NqjYmM 

CSS Text Decoration Module Level 3 → https://goo.gle/2zXWYsd 

The ::cue pseudo-element → https://goo.gle/2Z0E6kF 

CSS Scoping Module Level 1 → https://goo.gle/3hXj9jt 

Part and theme explainer → https://goo.gle/2YqsJn2 

Jun 24, 2020
13: Spacing
24:15

In this episode we do our best to cover the many ways to create space on the web. From techniques like HTML entities nbsp; to gap, we cover the clever, hacky and clean ways you can create spatial relationships on the web. 

Links

CSS Logical Properties and Values Level 1 → https://goo.gle/3gw7FTp 

HTML Entities → https://goo.gle/36Soqnd 

Everything You Should Know About Collapsing Margins → https://goo.gle/2MwOuLr 

Adam’s video: flex gap and internationalization → https://goo.gle/3gIuB1w

Jun 17, 2020
12: Logical Properties
20:20

The days of  euro-centric spacing like `margin-top` are limited: instead, say hello to `margin-block-start` to define space that works within any linguistic context based on your layout needs.In this episode we shake the physical and lean into the logical as we break down CSS logical properties.

Links:

https://goo.gle/3gw7FTp 

Flow-relative syntax for margin - like shorthands -

https://goo.gle/2ZLoS4W 

May 27, 2020
11: Grid
31:50

Tracks, gaps, areas and flow are hot topics in this full coverage episode on CSS grid. We don’t leave anything out, so you’re bound to pick up something new. We talk about functions like min, max, and minmax, and how to combine all of the powers of CSS Grid to create explicit and auto layouts. This episode will set you up to reach for the right parts of grid at the right time.

Links

Grid Spec → https://goo.gle/3bLLfcW 

3 CSS Grid Features Una Loves → https://goo.gle/2LGJAL8 

Grid to Flex → https://goo.gle/2ThGBx0 

May 20, 2020
10: Flexbox
24:02

In this episode we flex our flexbox knowledge and dive deep into CSS layout using the flexible box model. We talk about content axis’, flex flow, wrapping, order, justification, alignment, and more!

Links

Flexbox Spec - https://www.w3.org/TR/css-flexbox-1/

Flow-flow with writing mode - https://codepen.io/argyleink/pen/mdeedye

Grid to Flex: https://gridtoflex.com

May 13, 2020
9: Layout
25:31

In this episode we provide an overview and slight history of laying things out on the web, starting from blocks and framesets, ending with Grid and Houdini. 

Links

A History of CSS through 15 years of 24 ways → https://goo.gle/3fnrBXI 

Holy Grail Layout → https://goo.gle/2ynld2l 

Complete Guide to Flexbox → https://goo.gle/2A2Wtg9 

Grid Guide → https://goo.gle/2SEldBM

May 06, 2020
8: Sizing Units
25:43

We’re sizing up sizing in CSS in this episode as we break down all the different lengths and measurements in CSS. CSS makes using these things seamless, it’s great, but let’s study some of the intricacies here; how it works and what that means for your day to day usage. 

Links

CSS Spec Values and Units Level 4 → https://goo.gle/2KKdttw 

Sizing and Units on MDC → https://goo.gle/2VMkros 

Speech Module → https://goo.gle/2YbLISJ 

All About Ems → https://goo.gle/3bMViiV 

Apr 29, 2020
7: Color Part 2 - Perception
21:49

Explore perceptual, human-centered, color in this episode as we review latest specs, latest syntaxes, theories and strategies for color on the web in 2020.  

Links:

Spec CSS color level-4 → https://goo.gle/3cFCaDr 

Draft Spec CSS color level-5  → https://goo.gle/3cL4CUF 

How Color Gamut & Display Technology Can Affect Your Content → https://goo.gle/3eIH5p3 

WICG Contrast Ratio → https://goo.gle/2XWxZyZ 

Lea Verou LCH color picker→ https://goo.gle/2VvVopn 

Webkit Working on Color Level 4 → https://goo.gle/353yf0D 

Apr 22, 2020
6: Color Part 1 - Usage
31:09

In this part 1 episode, we dive deep into using CSS color. We discuss ways to write and code colors, places they can go, functions you can use on them, and then we top it off with a hex color challenge. As always, you’ll learn new jargon, pick up a trick or two, and learn something new. 

#C55 is #ace not #5ad

Links

The Evolution of Color - Chris Lilley

Read color hex codes - Dave DeSandro

CSS color level 3

“flavor” system color

Web Almanac 2019: CSS Chapter -- https://almanac.httparchive.org/en/2019/css

Nerds Guide to Web Color -> https://css-tricks.com/nerds-guide-color-web/

HSL hue turn rotate codepen

Apr 15, 2020
5: Inheritance
08:07

Inheritance and its effects in CSS are found all over your styles, almost invisibly, until further investigation through devtools or docs. In today’s episode, we illuminate the aspects of inheritance, how they’re useful, things to watch out for, and of course tips, tricks and vocabulary. 

 

Links

Spec: css-cascade-3 https://goo.gle/39KZPR6 

List of inherits or not https://goo.gle/2wn0yKF 

Apr 08, 2020
4: The Cascade
11:49

The “C” in CSS stands for the cascade! And that’s what today’s show is all about. Learn how the styles you write are affected by other styles, and how it all boils down to what the user sees.

4 Phases Of The Cascade:

› Position

› Specificity

› Origin

› Importance

Links

MDN on the Cascade and Inheritance → https://goo.gle/39jAEES 

CSS Cascade Interactive Article → https://goo.gle/2UhqIHV 

Una’s Doodle → https://goo.gle/2QKTy13

Apr 01, 2020
3: Specificity
12:58

In this episode we talk about how the browser resolves multiple selectors targeting the same subjects and how it determines which style to actually apply. Turns out, lots of code from many different locations is trying to style your elements, learning about specificity will help you debug and understand why or why not certain styles are winning over others. 

 

Links

Diagram by Estelle Weyl http://specifishity.com

Specificity Calculator https://specificity.keegan.st

Mar 24, 2020
2: Selectors
15:02

Get ready to learn some new CSS vocabulary! In this episode we talk about selectors, a syntax used to find elements (subjects) in a tree. CSS uses selectors to bind styles to subjects, and it’s quite powerful. We go over universal selectors, type selectors, class selectors, ID selectors, attribute selectors, pseudo selectors, complex and compound selectors, and various combinators. A lot of things!

Links

CSS selectors level 3 →https://goo.gle/39MHdRp 

CSS - Tricks: How Selectors Work → https://goo.gle/3cUSb9y 

Mar 18, 2020
1: The Box Model
12:05

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 

Mar 12, 2020