Native Tethering and Style Scoping Replaces Hacks

Anchor positioning tethers UI components to targets without DOM changes or heavy JS, using anchor for FLIP-like transitions (see AIM technique). Core features now baseline; sub-features pending. Pair with @scope for selector scoping—limits cascade into nested elements via 'donut' holes, ending selector reach to avoid global collisions and bloated class names.

Apply @scope to simplify naming: styles stop propagating beyond defined boundaries, preventing leaks into child components. Browser support: full across latest versions.

Name-Only Queries Enable Contextual Responsive Design

Container queries drop size requirements—style by container-name alone. Set container-name: sidebar on .sidebar, then @container sidebar { grid-auto-flow: column; } on .card for layout shifts based on context, not viewport.

Supported in Chrome 149, Safari 26.4, Firefox 148. Use for modular components that adapt to parent containers without media queries.

CSS Shapes for Dynamic Geometry and Text Flows

shape() draws responsive clipping paths with CSS syntax and dynamic units like rem or calc(), escaping SVG's pixel locks for complex, scalable geometry.

Extend shape-outside with xywh() and rect() for precise text wrapping around custom boundaries—no images or clip-path hacks needed. Ships in Chrome 150 (imminent), Safari 18, Firefox 149.

SPA Transitions and Typo Units Boost Polish

view-transition-class animates DOM collections with one rule; JS types control forward/backward motion for contextual SPA routing without full framework overhead.

New relative units rcap, rch, rex, ric deliver cap-height, ch-height, ex-height, ic-width precision for typography, scaling reliably across fonts.

Trade-off: Early adoption risks partial support, but baselines eliminate 'I can't use it' blockers for production UIs.