The CSS Podcast

Meet the Hosts: Una Kravets and Bramus Van Damme

Understanding who hosts The CSS Podcast helps explain its quality and depth. Both Una Kravets and Bramus Van Damme are Developer Advocates at Google, specializing in web platform technologies and CSS specifically.

Una Kravets

Una Kravets has established herself as a leading voice in the web development community. Her work focuses on pushing the boundaries of what's possible with CSS and helping developers adopt new features effectively. She frequently speaks at web conferences, contributes to CSS specifications through W3C working groups, and maintains active presence across social media platforms where she shares CSS tips and insights. Her approachability and ability to explain complex concepts clearly have made her a trusted resource for developers worldwide.

Bramus Van Damme

Bramus Van Damme brings European perspective and extensive practical experience to the show. His expertise spans the full spectrum of frontend development, with particular depth in CSS specifications and browser implementation details. Like Una, he's deeply involved in the web standards community, contributing to discussions that shape the future of CSS. His technical rigor complements Una's presentation style, creating a dynamic that keeps episodes both informative and engaging.

Together, they bring different perspectives and areas of expertise, ensuring that episodes cover topics thoroughly from multiple angles. Their chemistry and mutual respect come through in every episode, making the learning experience feel like a conversation between knowledgeable friends rather than a lecture.

Episode Coverage Across Six Seasons

The CSS Podcast has released over 100 episodes organized into seasons, providing a systematic approach to learning CSS from foundations to cutting-edge features.

Season 1 - CSS Fundamentals

Early episodes tackle the most fundamental concepts. The Box Model episode explains how browsers calculate element dimensions, including content, padding, border, and margin. Selectors and specificity receive dedicated attention, explaining how to target elements effectively. The cascade and inheritance episodes explain how styles propagate through the DOM, helping developers work with CSS rather than against it.

Season 2 - Advanced Concepts

This season covers CSS Houdini series including Paint, Layout, Typed OM, and Properties & Values. Episodes on custom properties (CSS variables), pseudo-elements, and animations build on fundamentals to show more sophisticated techniques.

Season 3 - Modern Features

Container queries receive extensive coverage, enabling component-level responsive design. The :has() selector is explored in depth as a groundbreaking parent selector. Cascade layers and native CSS nesting are also covered.

Season 4 - Layout and Behavior

Popover and dialog elements are explained alongside top-layer animations. Color function updates, text wrap capabilities, and advanced :has() tips provide practical techniques for modern development.

Season 5 - Interactive CSS

Scroll-driven animations enable scroll-based effects without JavaScript. View transitions provide smooth state changes. Anchor positioning and state queries extend what's possible with pure CSS.

Season 6 - Latest Innovations

CSS if() and custom functions bring programming-like capabilities to stylesheets. Customizable select elements solve long-standing styling challenges. Advanced CSS functions complete the picture of modern CSS capabilities.

Modern CSS Features That Change Everything

As CSS has evolved, the podcast has kept pace, covering features that have fundamentally changed what's possible in web layouts and interactions.

Container Queries and State Queries

Container queries represent one of the most significant additions to CSS in recent years, enabling component-level responsive design. The podcast explains how container queries work, how they differ from media queries, and practical patterns for using them effectively. State queries extend this concept further, allowing styles to respond to the state of container elements rather than just viewport dimensions.

The :has() Selector

The :has() selector broke new ground as CSS's first parent selector, allowing styles to be applied based on descendant elements. The podcast covers multiple episodes on :has(), from initial introduction through advanced tips and tricks. This feature enables patterns that previously required JavaScript, making CSS more powerful and reducing the need for style sheet complexity.

CSS Nesting

After years of developers nesting CSS selectors using preprocessors like Sass, native CSS nesting has arrived. The podcast covers the syntax, the differences from preprocessor nesting, and best practices for using this feature effectively.

Scroll-Driven Animations andScroll-driven animations allow View Transitions

elements to animate based on scroll position without JavaScript, enabling effects like parallax and reveal animations. View Transitions provide smooth transitions between page states, improving perceived performance and user experience.

Anchor Positioning and Popover API

Anchor positioning solves a long-standing CSS challenge: positioning elements relative to other elements rather than the viewport. Combined with the Popover API, these features enable dropdown menus, tooltips, and other UI patterns that previously required JavaScript libraries. Our web development team regularly implements these techniques to create interactive user interfaces without heavy JavaScript dependencies.

CSS and Web Performance

Modern CSS plays a crucial role in achieving the performance goals that frameworks like Next.js emphasize. Understanding how CSS impacts Core Web Vitals, how to minimize layout shifts, and how to optimize rendering performance helps developers build sites that meet modern performance standards. For projects requiring optimal search visibility, combining effective SEO strategies with performant CSS creates websites that both users and search engines love.

The podcast regularly covers performance implications of CSS decisions, from understanding paint and layout costs to optimizing animations for smooth 60fps rendering. These insights are invaluable for developers building performance-critical applications where every millisecond matters.

CSS-only solutions for interactive elements, like those enabled by anchor positioning and the Popover API, can significantly reduce JavaScript bundle sizes. By understanding when to use pure CSS versus when JavaScript is necessary, developers can make informed architecture decisions that benefit both performance and maintainability.

Sources

1. The CSS Podcast - Official Site
2. The CSS Podcast - Dev Shows