695: 5 New CSS Features You Should Know

Episode Summary

Executive Summary: The episode highlights five CSS features—nth-child micro syntax, motion path, scroll snap, scroll-driven animations, and margin trim—framing them as practical ways to reduce JavaScript, simplify layouts, and unlock richer interactions. The hosts compare browser support, share real-world use cases, and discuss how these tools can improve developer workflows and user experience while cautioning that some are still emerging.

Main Topics: Nth-child micro syntax: Introduces the 'of' clause for nth-child, enabling selection of the nth matching element within a filtered subset (e.g., only visible, selected, or highlighted children). The hosts emphasize how useful this is when DOM order alone is not enough. CSS motion path: Explains how DOM elements can move along SVG paths using offset-path and offset-distance, opening up richer browser animations and potentially more design-tool-to-code workflows. Scroll Snap: Covers scroll snapping for carousels, galleries, and section-based layouts, noting that it is widely supported and can replace many JavaScript scroll/slider solutions. Scroll-driven animations: Discusses experimental scroll-linked animation APIs that let developers tie animation progress to scroll position, with examples like scroll-based reveals and progress effects. Margin trim: Describes margin trimming as a cleaner way to remove unwanted outer margins in cards and containers, especially where first/last child spacing patterns are otherwise needed. Reducing JavaScript with modern CSS: A recurring theme is that these features let developers rely more on the browser for layout, motion, and interaction, reducing the need for frameworks or custom scripts.

Key Arguments: Nth-child micro syntax is valuable because it can target the nth element within a subset, not just the nth child overall, solving cases where hidden or filtered elements break normal selectors. Motion path becomes more compelling when paired with modern animation easing tools, making richer browser-native motion more feasible. Scroll Snap is a mature browser feature that can improve UX in carousels, galleries, and long-form layouts without JavaScript. Scroll-driven animations are promising but not yet broadly usable; they are best viewed as near-future tooling with strong demo potential. Margin trim solves a common CSS pain point: unwanted spacing at container edges, especially in cards and component layouts. These features matter most when developers cannot easily add classes or change templates, or when they want to keep components self-contained and avoid extra JavaScript.

Data Points: Chrome support for nth-child micro syntax: Chrome 110 - The nth-child 'of' selector syntax is supported in Chrome starting at version 110. Firefox support for nth-child micro syntax: Firefox 113 - The nth-child 'of' selector syntax is supported in Firefox starting at version 113. Safari support for nth-child micro syntax: iOS 9 - The hosts note Safari has supported the feature for years, starting on iOS 9. Scroll Snap support in Chrome: 2018 - The feature has been in Chrome since 2018, making it mature and usable today. Legacy support for Scroll Snap: Internet Explorer 10 - They mention minor support for Scroll Snap even in IE10. Margin trim support in Safari: 16.4 - Margin trim is currently only available in Safari, beginning with version 16.4. Episode reference: 619 - They reference a previous Syntax episode featuring Brahmas and scroll-driven animations.

Pivotal Quotes: "The answer to that is, yeah. If you have access to that index and you are rendering it yourself and you have full control over the templates, probably... it's easier just to throw a class on that thing." — Wes: Explaining why advanced selectors matter most when template control is limited or impossible. "Gap for layout, margin for content." — Scott: A concise rule of thumb proposed while discussing margin trim, gap, and spacing strategy. "What if their face was going up and down the wavelength as they were going? Because you could use the CSS motion path for that." — Wes: Brainstorming an audio-player visualization using motion path and an audio waveform.

Implications: Developers can increasingly replace JavaScript-driven UI patterns with native CSS, improving performance and maintainability. Some features are production-ready now, while others are close enough to plan for and prototype.