645: Mouthblogging CSS in 2024

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.