812: CSS 4, 5, and 6! With Google’s Una and Adam

Episode Summary

Executive Summary: The episode explores how CSS has evolved far beyond “CSS3” and why the hosts/guests are proposing unofficial CSS4/CSS5/CSS Next buckets to better teach, discuss, and track modern features. The conversation also highlights the push for cross-browser standards, the role of Baseline/Interop, and exciting near-future UI primitives like customizable select, popovers, anchor positioning, scroll-state queries, and text-box trimming.

Main Topics: Reframing CSS into eras/levels: Yuna and Adam explain the community effort to reintroduce CSS version-like buckets (CSS3, CSS4, CSS5, CSS Next) to reflect how much CSS has changed and make it easier to teach, market, and understand feature maturity. Baseline vs CSS levels: They distinguish between CSS era buckets and Baseline, noting that Baseline is about browser support availability while CSS levels are about the language’s evolution and feature grouping. Cross-browser implementation and Interop: The guests stress that web platform progress only matters when features ship across browsers, and encourage developers to use Interop, issues, and feedback channels to influence prioritization. Customizable select, popover, and anchor positioning: A major focus is the work enabling fully customizable selects and layered UI through primitives like popover and anchor positioning, reducing the need for heavy JavaScript component libraries. New CSS capabilities: container, state, and layout features: They discuss upcoming or recent features such as container queries, scroll-state queries, snap/state queries, text-box trimming, and scroll-driven animations, emphasizing how they solve long-standing UI problems natively. Progressive enhancement and graceful fallback: The conversation repeatedly returns to progressive enhancement: new CSS features should degrade into usable experiences on older/unsupported browsers rather than failing completely. Community feedback and developer influence: The guests urge listeners to prototype, share demos, comment on specs, and participate in issue discussions because real-world use and feedback shape what browsers prioritize next.

Key Arguments: CSS is no longer meaningfully described by the old “CSS3” label; the language has evolved enough that new eras help developers understand what’s available. CSS version buckets are unofficial but useful for education, documentation, hiring expectations, and feature discovery. Baseline and CSS levels are related but different: Baseline centers browser support, while CSS levels center the language/spec evolution. Browser vendors need prototyping, feedback, and cross-browser collaboration; no single browser should define the platform alone. Features like popover, anchor positioning, and customizable select are foundational primitives that reduce dependence on JS-heavy UI libraries. Many new CSS features were designed with progressive enhancement in mind so older browsers still get a usable experience. Container queries and related features are powerful but require planning and adoption effort, which slows real-world uptake despite high demand. Developers can shape the platform early by building demos, filing issues, and participating in Interop and working-group discussions.

Data Points: CSS4 bucket range: 2013–2018 - Uno and Adam describe the unofficial categorization of CSS eras. CSS5 bucket range: 2019–2024 - Uno and Adam describe the unofficial categorization of CSS eras. Working group size: 5 to 10 people - Uno mentions the community group that categorized CSS features. CSS feature count: Hundreds - They note they went through hundreds of CSS features to categorize them. Interop score: 97.3 - Adam references an Interop score for 2024 while discussing CSS Has and browser support. Container Queries baseline date: February 14, 2023 - Yuna mentions container queries reaching Baseline on Valentine’s Day. Text-wrap balance initial cap: 4 lines - Adam notes the feature was initially limited for performance reasons. Text-wrap balance later cap: 6 lines - Adam says Safari optimizations later increased the line cap.

Pivotal Quotes: "Chrome only is not a phrase that we like." — Yuna Kravitz: Yuna emphasizes cross-browser web standards over single-browser shipping. "JavaScript should be used for logic, it should be used for state changes, it should be used for actual content and for pulling in data. It shouldn't be used for styling." — Yuna Kravitz: She explains why new CSS primitives are important for separating concerns. "The browser is about to generate that stuff for you." — Adam Argyle: Adam describes the future carousel work where browsers handle controls, accessibility, and focus management.

Implications: For developers, the message is to stop thinking of CSS as “old” or limited, and to start adopting modern primitives early with progressive enhancement. For the industry, browser collaboration, specs, and real developer feedback will shape the next generation of web UI.