645: Mouthblogging CSS in 2024

December 9, 2024

56 min episode · 2 min read

Episode

56 min

Read time

2 min

AI-Generated Summary

Published Dec 25, 2025

Key Takeaways

✓Field-sizing property: Set field-sizing content on textarea, select, and input elements to auto-resize based on content without JavaScript. Works across any font, size, language, or writing mode, replacing complex grid-based workarounds that required invisible divs and JavaScript propagation.
✓Height auto animations: Use interpolate-size allow-keywords or calc-size function to animate elements to auto height after a decade of impossible workarounds. Requires CSS opt-in because existing non-working code would break if suddenly functional. Currently Chrome and Safari only, Firefox pending.
✓Anchor positioning: Position elements relative to other elements using anchor names and position properties. Includes fallback positioning when space runs out. Polyfill available from Oddbird for Safari and Firefox. Requires understanding view transition names and blocking behavior for consistent cross-page transitions.
✓Light-dark function: Declare light and dark color values in single declaration using light-dark function. Requires setting color-scheme property to light dark on root element. Eliminates need for separate dark theme classes, though Safari implementation currently has contrast issues with default hyperlink colors.

What It Covers

Chris Coyier and Dave Rupert review CSS wrapped 2024 from Chrome DevRel, covering major CSS features that shipped including field-sizing, height auto animations, anchor positioning, view transitions, and scroll-driven animations.

Key Questions Answered

•Field-sizing property: Set field-sizing content on textarea, select, and input elements to auto-resize based on content without JavaScript. Works across any font, size, language, or writing mode, replacing complex grid-based workarounds that required invisible divs and JavaScript propagation.
•Height auto animations: Use interpolate-size allow-keywords or calc-size function to animate elements to auto height after a decade of impossible workarounds. Requires CSS opt-in because existing non-working code would break if suddenly functional. Currently Chrome and Safari only, Firefox pending.
•Anchor positioning: Position elements relative to other elements using anchor names and position properties. Includes fallback positioning when space runs out. Polyfill available from Oddbird for Safari and Firefox. Requires understanding view transition names and blocking behavior for consistent cross-page transitions.
•Light-dark function: Declare light and dark color values in single declaration using light-dark function. Requires setting color-scheme property to light dark on root element. Eliminates need for separate dark theme classes, though Safari implementation currently has contrast issues with default hyperlink colors.

Notable Moment

The hosts realize CSS has achieved nearly all the major features developers requested in 2014, including container queries, parent selectors with has, display animations, and height auto transitions, questioning what major features remain to be built.

Know someone who'd find this useful?