900: 13 New CSS Features You Can Start Using Today

Episode Summary

Executive Summary: The episode surveys a wide set of modern CSS features now broadly available across browsers, emphasizing practical improvements in authoring, performance, and typography. Scott and Wes highlight under-the-radar additions like shape(), zoom, scrollbar styling, text-wrap balance/pretty, content-visibility, relative color syntax, new math functions, starting-style, and user-valid/user-invalid, explaining where each is useful, how they compare to older techniques, and where fallback behavior makes adoption safe.

Main Topics: Modern CSS shape/path authoring: shape() is presented as a more readable, CSS-native alternative to SVG path strings for clip-path, offset-path, and similar uses, with support for CSS units, variables, and relative sizing. Layout and sizing behavior improvements: zoom, individual transform properties (scale/rotate/translate), and align-content on block elements are discussed as ways to control sizing and centering without extra wrappers or transform hacks. Scrollbar styling and layout stability: New scrollbar-color, scrollbar-width, and scrollbar-gutter controls are explained as a cross-browser path to better-looking scrollbars and fewer layout shifts when scrollbars appear. Typography and wrapping controls: text-wrap: balance and text-wrap: pretty are positioned as modern solutions for headline balancing and avoiding awkward orphaned lines, with balance recommended for immediate use. Performance-oriented rendering control: content-visibility and contain-intrinsic-size are described as powerful tools for deferring offscreen rendering, while noting that real-world performance depends heavily on the page structure and browser behavior. Color, math, and logic functions in CSS: Relative color syntax plus round(), mod(), and rem() are highlighted as browser-native ways to derive colors and do math-like operations directly in CSS. Interaction and validation enhancements: starting-style, contenteditable='plaintext-only', and user-valid/user-invalid are covered as features that improve transitions, editable content, and form validation UX.

Key Arguments: shape() is far more author-friendly than SVG path strings because it uses CSS syntax, supports variables, and works with responsive units. zoom differs from scale because it changes layout flow around the element instead of only painting it larger in place. Scrollbar styling is now practical because width, color, and gutter can be controlled consistently enough to avoid layout shift and create better UI polish. text-wrap: balance is immediately useful for headings, while text-wrap: pretty is a future-facing enhancement for avoiding orphaned lines and awkward typography. content-visibility can dramatically reduce rendering work for offscreen content, but in some cases it can worsen scrolling performance if overused or applied at too fine a granularity. Relative color syntax makes reusable color systems easier by letting CSS derive shades and tints from existing colors without pre-processing. The new math functions round(), mod(), and rem() let CSS handle rounding and modular math directly, reducing the need for JS or preprocessing. starting-style finally lets developers animate elements as they enter the DOM without the old two-step class-toggle workaround. user-valid/user-invalid are better UX than valid/invalid because they wait for user interaction before showing validation state. contenteditable='plaintext-only' is useful for simple editors and text inputs because it prevents pasted formatting and weird rich-text markup from polluting the DOM.

Data Points: Browser support cadence: Past couple of years; mostly available in modern browsers today - The episode focuses on features that are broadly available now, with only minor exceptions and fallback needs. Approximate count of highlighted features: 7 or 8 - Wes notes there are about seven or eight CSS features that can be used confidently today. Scroll performance improvement: up to 250 ms - Scott cites Facebook engineers observing up to a 250 millisecond improvement in navigation times from content-visibility. Large DOM example: 826 people / about 200,000 elements - Scott describes uses.tech as having 826 profile cards with images, tags, and emojis totaling roughly 200,000 elements. Validation timing: after user interaction and blur - user-valid/user-invalid are said to trigger only after the user has interacted with the field and then blurred it. Rounding interval example: 25 pixels - A round() demo shows rounding to the nearest 25px increment. Relative color tweak example: +0.35 lightness - A syntax.fm button example increases lightness by 0.35 while preserving other color channels. Scrollbar width options: auto / thin / none - The new scrollbar-width property can reduce or hide scrollbars while preserving scrollability. Text wrapping modes: balance / pretty - Two new wrapping modes are discussed, with balance widely supported and pretty still limited. Color function channels: R/G/B or H/S/L (and similar channels) - Relative color syntax exposes channels so colors can be adjusted programmatically in CSS.

Pivotal Quotes: "shape can be used in something like clip path, anywhere that you would typically have used the path function in the past" — Scott: Explaining why shape() matters as a CSS-native alternative to SVG path syntax. "You are no longer allowed to make vertical centering jokes in CSS." — Wes: Reacting to align-content center working on block-level elements without flexbox or grid. "the browser should hopefully figure these things out" — Scott: Critiquing the need to manually tune content-visibility and intrinsic sizing when browsers could infer it automatically.

Implications: Listeners can adopt several now-safe CSS features to simplify layouts, improve typography, reduce JS work, and enhance performance. The broader trend is CSS absorbing behaviors that once needed generators, preprocessors, or JavaScript.