Reacting to State of CSS Survey

Episode Summary

Executive Summary: The episode reviews the annual State of CSS survey, using it to assess which modern CSS features are actually in use, which are promising but under-adopted, and where browser support still limits real-world usage. The hosts highlight practical features like gap, variables, aspect-ratio, view transitions, and accessibility media queries, while debating adoption speed, browser compatibility, and the value of newer APIs such as anchor positioning and @property.

Main Topics: State of CSS survey overview and methodology: The hosts explain that the survey reflects developer adoption and awareness of CSS features, while acknowledging the sample is skewed toward survey-takers and early adopters. Layout and positioning features: Discussion centers on gap, subgrid, logical properties, media range syntax, object-view-box, and anchor positioning, with emphasis on browser support and practical use cases. Graphics, filters, and visual effects: They cover CSS filters, backdrop-filter, blend modes, hue-rotate demos, and other effects that enable richer UI but can be performance-sensitive. Color system advancements: The episode explores accent-color, currentColor, wide-gamut color spaces, color-mix, and relative colors, especially their implications for theming and design systems. Interaction and motion APIs: Scroll snap, overscroll-behavior, touch-action, and view transitions are discussed as tools for improving UX, context, and native-feeling interactions. Typography and variable fonts: Variable fonts are highlighted as a major creative and functional advance, enabling continuous control over weight, width, optical size, and other axes. Accessibility and user preference media queries: The hosts note growing use of prefers-reduced-motion, prefers-color-scheme, prefers-reduced-data, forced-colors, and related features as standards for accessible design.

Key Arguments: Gap is one of the most useful modern CSS features because it works across flexbox and grid without needing margin hacks. Subgrid adoption is still constrained by browser support, but the hosts expect it to become more viable as Chrome/Safari/Firefox coverage improves. Anchor positioning is a necessary response to top-layer APIs like popover and dialog, where traditional relative/absolute positioning breaks down. View Transitions are likely to be a net positive because they add context and polish when used tastefully, even if some sites overuse them. Relative colors are especially powerful for design systems because they let developers derive colors mathematically from existing values. Variable fonts unlock richer typography without layout shifts, making them ideal for responsive and expressive UI. Accessibility-related CSS features are increasingly important as more developers implement dark mode, motion reduction, and forced-colors support. CSS features often lag in adoption not because they lack value, but because browser compatibility, polyfills, and developer awareness remain uneven.

Data Points: gap usage: Number 1 - Most-used modern CSS feature in the survey; described as an underrated favorite. CSS variables usage: 94.3% - Second most-used feature; reflects broad, mature adoption. aspect-ratio usage: Number 3 - Highlighted as a highly adopted newer layout feature. CSS filters usage: 80% - A widely used visual effect category. container queries usage: 31% - Mentioned as a feature many developers say they use, though the hosts questioned the real-world figure. logical properties usage: 35% - Used for writing-mode-aware spacing and positioning. media range syntax usage: 21% - Up from 14% last year; presented as an underrated media-query shorthand. object-view-box usage: Not specified, implied low - Introduced as a barely-known image cropping feature. anchor positioning usage: 2% - Very early adoption, attributed to weak browser/polyfill support. blend modes usage: 40% - Visual effects category with room for growth. backdrop-filter usage: 50% - Described as increasingly common for modern UI effects. prefers-color-scheme usage: 6% jump - Signals broader dark-mode implementation. CSS has usage: 51% - Hosts expressed skepticism about how broadly this is used in practice. @property support: 81% - Mentioned as newly usable due to Firefox support, enabling typed CSS custom properties.

Pivotal Quotes: "Gap, number one." — Scott and Wes: The hosts react to the survey result showing gap as the most-used modern CSS feature. "If you responded to the survey using has, saying, yeah, I'm using has, you are lying. You're straight up lying." — Scott: A joking but pointed skepticism about real-world adoption of :has(). "Animation is not just for wow, that's cool. Animation is great for providing context as to what just happened and where I should look now." — Scott: Used to argue that view transitions have practical UX value beyond aesthetics.

Implications: The survey suggests CSS is becoming more powerful and expressive, but real adoption still depends on browser support and developer education. Expect more practical use of layout, color, and accessibility APIs as compatibility improves.