![](/assets/artwork/1x1-42817eea7ade52607a760cbee00d1495.gif)
84 episodes
![](/assets/artwork/1x1-42817eea7ade52607a760cbee00d1495.gif)
The CSS Podcast The CSS Podcast
-
- Technology
-
-
4.8 • 56 Ratings
-
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.
-
084: Text Wrap
In this episode Una and Adam talk about text wrap, a great modern improvement to typography on the web platform. Learn how you can create logical layout rules for your headings and other copy with just one line of code.
Resources:
text-wrap on MDN → https://goo.gle/3zvwixd
soft breaks → https://goo.gle/4cXKLAq
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; 💀🤘 -
083: :has() tips and tricks
In this episode Una and Adam expand on episode 61 about :has() by focusing specifically on use cases, tips and tricks. Get inspired and discover new ways to make reactive UI from CSS.
Resources:
Ep 61 → https://goo.gle/4cID6pE
Piccali → https://goo.gle/4ePKJMG
Ahmad Shadeed → https://goo.gle/4bsk85F
The Looper → https://goo.gle/3yKmXkI
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; 💀🤘 -
082: What's new in color & color functions
In this episode Una and Adam provide a color update, covering changes to the specs and new functions.
Links
RCS calc() tool → https://goo.gle/4cRRJHt
Apple Annie CSS Color Modules and Changes, Part I → https://goo.gle/3xtTr2A
Lea verou article on RCS for contrast → https://goo.gle/3L3x5YF
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; 💀🤘
-
081: Trigonometric Functions
In this episode Una and Adam share practical use cases, syntax and strategies for all the new math functions in CSS. From trig to algebra, they'll help you get a good idea on where and how these fit into your UI toolbelt.
Links
Ana Tudor tests your browser for CSS math function support → https://goo.gle/4cmBm5r
Great guide and overview from Daniel Wilson → https://goo.gle/4enKgBe
layout pow() → https://goo.gle/3RlvAsI
Using Absolute Value, Sign, Rounding and Modulo in CSS Today → https://goo.gle/4aY3OJz
Time based animation → https://goo.gle/3x6Dm2K
CSS type casting to numeric: tan(atan2()) scalars by Jane Ori → https://goo.gle/4bZyrj2
Open Props v2 type ramp prototype with pow() as taught by Dan Wilson in their post → https://goo.gle/45uqikj
CSS physics for transitions and keyframes with these math functions → https://goo.gle/3VltDgX
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; 💀🤘 -
80: Animating to and from top-layer
In this episode Una and Adam continue talking about dialogs and popovers, but this time it's all about animating them into and out of the top layer.. We'll be introducing starting-style, a new mode for transitioning discrete properties, and the overlay property for smooth entry and exit animations.
Links:
top-layer CSS spec → https://goo.gle/4c2elUW
Four new CSS features for smooth entry and exit animations by Una → https://goo.gle/3KpyB7e
Using @starting-style and transition-behavior for enter and exit stage effects → https://goo.gle/452FG7p
Popover on MDN → https://goo.gle/453xfss
:popover-open on MDN → https://goo.gle/3x5XLVl
Dialog and popover animated → https://goo.gle/3Kn1Ck7
Popover animated with nesting → https://goo.gle/3wW3Qns
What is the top layer? → https://goo.gle/457rUjQ
overlay property on MDN → https://goo.gle/3yKNRsT
MDN demos → https://goo.gle/4c2eIyO
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; 💀🤘 -
79: Popover and Dialog
The CSS Podcast is back, with an episode highlighting the popover API and dialog element! Learn what they can do, and when to use which when.
Links
Popover API lands in Baseline → https://goo.gle/3Vo2dIs
Dialogs and popovers seem similar. How are they different? → https://goo.gle/3wXD1z5
Dialog dilemmas and modal mischief → https://goo.gle/3R9nmDE Semantics and the popover attribute → https://goo.gle/3Vl3NuM Building a dialog component GUI Challenges → https://goo.gle/4c0YFkK
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; 💀🤘
Customer Reviews
Chock-Full Of Useful Info
I learned about this pod when I heard Una on an episode of JS Party. I’ve only listened to a couple of episodes so far and have already picked up some great tips. Thanks so much for sharing your knowledge!
Best CSS podcast out there
They go over topics thoroughly and add little bits of humor in there too. An informative and entertaining podcast for front end devs.
Freemote + CSS Podcast = 🔥🔥
Great podcast to help with understanding while driving. Then get back to the web and see things in real time at web.dev/css