What's New in CSS? Variables, Scoping, New Selectors and Color Functions

Episode Summary

Executive Summary: The episode surveys emerging and recently available CSS features, emphasizing how native CSS is absorbing capabilities once handled by preprocessors or JavaScript. The hosts focus on CSS custom properties, new color/filter functions, level 4 selectors, and viewport/font/angle units, arguing these changes make styling more dynamic, maintainable, and powerful directly in the browser.

Main Topics: CSS custom properties (variables): Detailed explanation of native CSS variables, their syntax, scoping, runtime updates via JavaScript, and practical uses like theming, scoped component values, and inline style-driven variables. Dynamic styling with native browser features: The hosts emphasize that CSS is increasingly capable of handling patterns that previously required Sass, Stylus, or JavaScript, such as reusable values, responsive adjustments, and interactive transformations. CSS filters and visual effects: Discussion of CSS filter functions like blur, grayscale, hue-rotate, drop-shadow, and their usefulness for image and UI effects, along with caveats around browser support and performance. Upcoming CSS color functions: The episode covers new color manipulation functions that will allow authors to adjust alpha, saturation, lightness, whiteness, blackness, tint, shade, blend, and contrast directly in CSS. Selectors level 4: The hosts review new selector capabilities such as :has(), scoped selectors, and an improved nth-child syntax that can filter by selector, making CSS far more expressive. Useful existing units and angle formats: A reminder about viewport units (vh, vw, vmax, vmin), character-based units (ch, ex), and alternate angle units (turn, rad, grad) that can simplify layout and animation math. Tooling and sponsors: Mid-episode sponsor reads for Bug Replay and FreshBooks explain how each service helps developers with bug reporting and bookkeeping, respectively.

Key Arguments: CSS is no longer a static language; it is actively evolving with browser-native features that reduce reliance on preprocessors and JavaScript. CSS custom properties are powerful because they are live at runtime, so changing one variable can update all dependent styles immediately. Scoped variables let developers define values globally or locally, making them ideal for theming, sizing, and component-specific behavior. Native variables unlock new patterns such as passing values through HTML inline styles and using JavaScript only to update CSS state, not to manually rewrite styles. Filters and color functions make richer visual effects and systematic theming possible without external image editing or complex build steps. Selectors Level 4 will solve long-standing CSS pain points, especially :has() and nth-child with an 'of selector' clause. Modern CSS features improve developer experience by making common design tasks easier, more declarative, and more maintainable.

Data Points: DOTJS talk length: 18 minutes - Wes mentions the conference talks in Paris are only 18 minutes long. CSS working group drafts: Multiple level-specific modules - They cite drafts.csswg with examples like CSS Animations 1/2, Multicolumn 2, Scroll Snap, and Media Queries Level 5. Bug Replay browser support: Firefox and Chrome extension - The sponsor description says Bug Replay works as a browser extension for Firefox or Chrome. FreshBooks offer: 1 month free - The FreshBooks sponsorship mentions a free month for listeners using the syntax referral. Viewport height unit: 100vh - Wes recommends min-height: 100vh on body to ensure full-screen layouts. Number of ports on charger: 5-port - Wes’s sick pick is an Anker five-port USB charger. Charger wattage: 40 watts - The charger is described as a 40W USB charger capable of charging multiple devices and even a MacBook while closed. Alternative charger wattage: 10-port 60-watt - Wes mentions a larger Anker model available in the same product line. MacBook charging anecdote: 9 hours - A low-power iPhone charger reportedly took nine hours to fully charge a MacBook battery from dead. Alpha hex value examples: FF = 100%, 00 = 0% - They explain RGGBBAA / hex alpha conversion for opacity in color codes. Conference format: One-track, no Wi-Fi - Wes describes DOTJS as a one-track conference with no Wi-Fi and surprise speakers.

Pivotal Quotes: "CSS is not standing still at all, and there's some really exciting stuff that's sort of on the verge of being implemented in browsers or are already in browsers that we can start using today." — Wes: Opening framing for the episode’s theme about modern CSS evolution. "The killer feature for CSS variables, as Scott said. SAS, nothing else can actually do this because it's compiled." — Wes: Explaining why runtime-updatable CSS variables are more powerful than preprocessor variables. "This is finally going to allow us to do that, which is something that makes me super duper excited, simply because it'll finally be an answer for all of those questions on Stack Overflow." — Wes: Discussing the upcoming :has() selector and parent-style selection use cases.

Implications: These CSS advances push styling toward a more declarative, runtime-aware model. Developers can expect less JavaScript, fewer preprocessing hacks, easier theming, and better component-level control as browser support matures.