PODCAST · technology
The CSS Podcast
by 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 Bramus Van Damme, Developer Advocates from Google, who gleefully breakdown complex aspects of CSS into digestible episodes covering everything from accessibility to z-index.
Episodes
-
100: Season 6 wrap up
Una and Bramus recap the season! They share some new updates and re-visit some of their favorite tips and tricks.Season 6 covered inline if() statements and custom functions, scroll state queries, carousel APIs, view transitions updates, anchor positioning, command invokers and interest invokers,...
-
99: More CSS functions
In this episode of The CSS Podcast, Una and Bramus cover a bunch of CSS functions from comparison functions to tree counting functions, the random function, and more. Resources: min(), max(), and clamp() Web Dev article → https://goo.gle/4nvMthu Article by Ahmad Shadeed → https://goo.gle/3JvPznI...
-
98: Customizable select
In this episode of The CSS Podcast, Una and Bramus cover building customizable select menus. Have you ever had to build a dropdown menu where you want to do something as simple as change the color, or add little flag icons? You know how hard it can be! Discover how the web platform is solving…
more -
97: Invokers and commands
In this episode of The CSS Podcast, we're diving into the power of invoker commands! Discover how the command and commandfor attributes allow you to declaratively open dialogs and show popovers. We'll explore standard commands and then jump into creating your own custom commands for more complex...
-
96: CSS anchor positioning
Welcome back to The CSS Podcast! Una and Bramus dive into CSS anchor positioning, a powerful new API that revolutionizes how developers handle dynamic UI element placement. Learn how to create interactive tooltips, popovers, and menus directly in CSS, eliminating the need for complex JavaScript....
-
95: Updates to View Transitions
View Transitions have been around for a little while. This episode of The CSS Podcast covers some of the recent additions and changes since we last covered this in episode 89. Resources: What's new in view transitions (2025 update) → https://goo.gle/47k7RAb Same-document view transitions have...
-
94: CSS carousels (and scroll)
Welcome back to The CSS Podcast! We're diving into a series of powerful scroll APIs that enable you to build custom, interactive carousels entirely with CSS, eliminating the need for JavaScript. These APIs, which also power customizable select elements, unlock even more innovative scroll-based...
-
93: State queries in 2025
Una and Bramus dive into the latest advancements in CSS with state-based container queries. Learn how to create responsive and dynamic user experiences by querying the scroll state of UI elements, including 'stuck,' 'snapped,' and 'scrollable' states. Discover practical examples and techniques to...
-
92: CSS if() and custom functions
Welcome back to the new season of the CSS Podcast, where Una and Bramus are your guides, your cohosts, and your CSS best friends. In this episode we dig into two very powerful new CSS features: inline conditionals with the if() function, and custom functions. Resources: CSS if() function...
-
091: Season 5 Wrap-up
Una and Adam recap the season! They share their favorite features, stories, and use cases. Season 5 covered popovers, dialogs, top layers, trig functions, color functions, :has() tricks, balanced text wrapping, linear() easing, nesting, anchoring, state queries, view transitions, and scroll…
more -
090: Scroll-driven animations
In this episode our esteemed guest returns! This time to help us grok Scroll Driven Animation. Learn all about scroll(), view(), animation-timeline, timeline-scope, animation-range, and more. Power those animations with off-the-main-thread CSS scroll animation powers. Resources: Bramus's Demos…
more -
089: View transitions
In this episode Una and Adam bring on an esteemed guest Bramus, who brings us deep knowledge on View Transitions. These are easy to get started with but difficult to master, but not with Bramus here to teach us. He'll be covering introductory to advanced API features and a big bag of examples and...
-
088: State queries
In this episode, Una and Adam discuss a future web capability that builds on container queries: state queries. From CSS, this feature will be able to detect if a container is overflowing, when an element is scroll snapped, and when an element is stuck from position: sticky. Resources: :stuck,...
-
087: Anchor positioning
In this episode Una and Adam explain anchor positioning and all its amazing features. Resources: Introducing the CSS anchor positioning API → https://goo.gle/3SWrvM5 CSS anchor positioning → https://goo.gle/4dwgmd9 Tab's talk from CSS Day → https://goo.gle/4ds8g5B Una's Anchor Tool →...
-
086: Nesting 2024+
In this episode Una and Adam catch you up to the latest syntax features of CSS nesting. Resources: Episode 47 → https://goo.gle/3SvM9T4 Episode 65 → https://goo.gle/3ygA7X1 CSS Nesting Update → https://goo.gle/3WHCRpK Una Kravets (co-host) Twitter | Instagram | YouTube Making the web more…
more -
085: Linear easing function fun
In this episode Una and Adam cover the linear() CSS easing function that can create bounce and spring effects. Resources: Ep 22 on Animation → https://goo.gle/4frnp8y linear() generator → https://goo.gle/46xs2JZ Complex animation curves in CSS with linear() → https://goo.gle/4ftm0Oz Open Props...
-
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 →...
-
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 →...
-
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...
-
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 →...
-
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…
more -
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...
-
78: Season 4 wrap!
I can't believe we're already at the end of season 4! This season, we've been focusing on CSS gotchas and resolving these common CSS pitfalls. And alas, on our last episode of the season, we're going to take a look back at all of those tips and tricks and pick some of our favorites to highlight…
more -
77: Why isn't percentage working here?
In this episode, Una and Adam talk about percentage resolution for various properties like font-size, padding height and width. They break down and explain why percentages may not work or may not be what you expected. Links → https://goo.gle/47XtWU1 Understanding CSS Percentage →...
-
76: Why isn't my element stuck where I wanted it to stick?
In this episode Una and Adam help you uncover moments where a sticky element isn't sticking. There are a couple of gotcha around implementing a sticky element and by the end of the show you'll know what they are and a few ways to work around them. Links: sticky stack - https://goo.gle/3QICxTz...
-
75: Why isn't my custom property the value I expect?
In this episode, Una and Adam discuss common gotchas with custom properties, which often feel fully reactive during use, but their limits and implementation details can popup at unexpected times and create a headache. They'll cover these situations and their solutions! Links: Value stages →...
-
74: How do I center a div?
In this episode we tackle one of the most asked questions of all CSS history.. how do I center this div? We'll cover multiple strategies that each have tradeoffs and super powers over each other. Links: Centering in CSS → https://goo.gle/3RRki02 Comparing grid and flex place-items and…
more -
73: Why is my animation glitching?
On this episode of the #CSSpodcast, we're diving into how to deal with glitchy animations in your code base! Links: MDN transform-style - https://goo.gle/45YFu8B MDN backface-visibility - https://goo.gle/46mPvfE Una Kravets (co-host) Twitter | Instagram | YouTube Making the web more colorful ✨🎨...
-
72: Why does my gradient have muddy colors in the middle?
In this episode, we tackle the issues around getting undesirable gradient results. Sometimes it's you, sometimes it's the color space. We'll help you identify, assess and remedy muddy gradients. Links: HD color guide - https://goo.gle/3RhyvmP various gradients in color spaces -...
-
71: Why do I have layout shift?
In this episode we're shifting the topic to layout shift, that moment where you watch the page adapt to something lazily loaded which has impacted the layout in some way where you see content shift around. Links: CLS - https://goo.gle/3kle3AW Optimizing CLS - https://goo.gle/3fxu6IE CSS for Web...
-
70: Why is my image distorted?
Too small? Too big? Learn how to make your images just right and all the reasons they might be looking a little funky when you're adding media to your interface. Links: CSS for Web Vitals → https://goo.gle/3E98gY9 Learn Responsive Images → https://goo.gle/45EFuds Aspect Ratio →...
-
69: Why is it overflowing?
In this episode we're overjoyed to overexplain why you may be having overflow in your page. somewhere over the rainbow, an overheating developer overcooked the inline sizes and ended up oversleeping for work the next day. Now let's overanalyze and overshare about CSS overflow. Links: The rules of...
-
68: Why isn't the margin applying?
In this episode we explore why margin may not be working for you. We'll teach you about block formatting contexts and margin collapsing! We'll make you the space you want in your designs! Links: The Rules of Margin Collapse → https://goo.gle/441OGaH CSS Margins → https://goo.gle/4434Ctj Learn…
more -
67: Why isn't z-index working?
In this episode we explore why z-index isn't working for you. We'll teach you about stacking context and how to make sure you've set yourself up for layering success! Join us on this journey through positioning, variable architecture, tools, and more, to bring those elements to light. Links:...
-
66: Season 3 recap & what's next!
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...
-
65: Nesting
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...
-
64: Subgrid
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 -...
-
63: Media query range syntax
Media query range syntax is a really nice addition. Links Polyfill: https://goo.gle/3TXcyYD New syntax for range media queries: https://goo.gle/3DQlHg0 Una Kravets (co-host) Twitter | Instagram | YouTube Making the web more colorful ✨🎨 Web DevRel @googlechrome Unicorn face host of @toolsday &...
-
62: Color functions: An update
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...
-
61 :has()
: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...
-
60: Inert
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…
more -
59: Container queries
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...
-
58: Cascade layers
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…
more -
55: DevTools Mini Series - Layout
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...
-
54: DevTools Mini Series - Color
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...
-
53: Season 2 wrap up
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 →...
-
52: counters and @counter-style
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 |...
-
51: Styling SVG in CSS
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...
-
50: inherit, initial, unset, and revert
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 |...
-
49: Accessibility
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…
more
We're indexing this podcast's transcripts for the first time — this can take a minute or two. We'll show results as soon as they're ready.
No matches for "" in this podcast's transcripts.
No topics indexed yet for this podcast.
Loading reviews...
ABOUT THIS SHOW
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 Bramus Van Damme, Developer Advocates from Google, who gleefully breakdown complex aspects of CSS into digestible episodes covering everything from accessibility to z-index.
HOSTED BY
The CSS Podcast
CATEGORIES
Loading similar podcasts...
Frequently Asked Questions
How many episodes does The CSS Podcast have?
The CSS Podcast currently has 100 episodes available on PodParley. New episodes are automatically indexed when they're published to the podcast feed.
What is The CSS Podcast about?
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 Bramus Van Damme, Developer Advocates from Google, who gleefully breakdown complex aspects of CSS...
How often does The CSS Podcast release new episodes?
The CSS Podcast has 100 episodes. Check the episode list to see recent publication dates and frequency.
Where can I listen to The CSS Podcast?
You can listen to The CSS Podcast on PodParley by clicking any episode. We provide an embedded audio player for direct listening, and you can also subscribe via your preferred podcast app using the RSS feed.
Who hosts The CSS Podcast?
The CSS Podcast is created and hosted by The CSS Podcast.
URL copied to clipboard!