CSS Proposals @when, CSS Masonry, Carets

Episode Summary

Executive Summary: The episode surveys emerging CSS proposals and browser features that could make styling more expressive and less reliant on preprocessors: conditional logic with when/else, grid masonry, caret styling, native nesting, environment variables, custom media queries, and range-based media syntax. Scott and Wes emphasize how many of these are already useful via PostCSS, and argue that CSS is becoming more programmable and practical for real-world layouts and workflows.

Main Topics: Conditional CSS with when/else: The hosts discuss a proposal that would allow CSS to branch with if/else-like logic, enabling combined conditions such as media queries plus supports queries without repeating or negating rules. CSS Grid Level 3 Masonry: They cover a proposed masonry layout for CSS Grid, aimed at Pinterest-style layouts where items of varying heights flow into the next available vertical space, reducing reliance on JavaScript or awkward column hacks. Caret styling in CSS: The conversation explains a proposal for styling the text cursor/caret, including block, underscore, and color control, which would be especially useful for custom editors and code-like interfaces. CSS nesting: They note that native nesting is coming to the browser, mirroring long-standing preprocessor behavior from Sass/Less/Stylus and making nested component styling much more ergonomic. Environment variables and custom media queries: The hosts explain CSS environment variables and, more importantly, custom media queries via @custom media as a cleaner way to define reusable breakpoints and query names. Range-based media query syntax: They highlight a newer media query syntax that uses comparison operators (e.g., less than/greater than) and range expressions to make breakpoint logic easier to read and write.

Key Arguments: Native CSS proposals are making the language feel more programmatic, reducing the need for preprocessing in many common cases. Masonry layout is a real gap in current CSS that has historically required JavaScript or poor CSS-only workarounds. Native nesting is valuable because it matches how developers already author styles in preprocessors, especially for component-scoped rules. Custom media queries are a better solution than trying to inject CSS variables directly into media queries. Range syntax improves readability and reduces mistakes compared with traditional min-width/max-width media queries. PostCSS can already be used to adopt several of these next-gen CSS features today, making it a practical bridge to the future.

Data Points: CSS Grid level: Level 3 - Masonry layout is described as part of CSS Grid Level 3, while Grid Level 2 is subgrid. Browser support example: Chrome 104 - Range media query syntax is mentioned as being available in Chrome 104. Browser support example: Firefox 62 - Range media query syntax is mentioned as being available in Firefox 62. Sponsor offer: 2 months free - Sentry sponsorship offer with code 'tasty treat'. Sponsor offer: Double the free usage tier - Sanity sponsorship offer at sanity.io/syntax. Number of sponsors discussed: 2 - The episode opens with sponsor mentions for Sentry and Sanity.

Pivotal Quotes: "CSS is a programming language now." — Scott Tolinsky: Scott reacts to the when/else proposal and the ability to express conditional logic directly in CSS. "This is a great use case for Post CSS because it can be compiled easily to the equivalent." — Wes Bos: Wes explains why the new range-based media query syntax is useful even before full browser support. "I think we should wrap it up. That's all I got." — Wes Bos: Closing the discussion after covering the main CSS proposals and future-facing features.

Implications: Listeners should expect CSS to become more expressive, reducing reliance on Sass-like tooling for many tasks. Teams can start experimenting via PostCSS now, while browser support continues to catch up.