Modern CSS: Container Queries, View Transitions, and :has()

Modern CSS keeps closing gaps: three features once called “future CSS” are now production-ready. Container queries let components respond to their container’s size instead of the viewport, so one card reflows correctly in a sidebar or a full-width section. Size queries are Baseline since February 2023 (Chrome 105+, Firefox 110+, Safari 16+); style queries, which theme a component from its parent’s custom properties, became Baseline Newly available in May 2026. Prefer container-type: inline-size in practice; size applies full containment and breaks content-sized boxes.

The View Transitions API adds native animated transitions between states and pages without animation libraries. Same-document transitions became Baseline Newly available in October 2025 (Chrome 111+, Safari 18+, Firefox 144+). Cross-document transitions via @view-transition work in Chrome and Safari but still lack Firefox support, so treat them as a progressive enhancement and honor prefers-reduced-motion.

The :has() selector, Baseline Widely available since December 2023, finally delivers the long-awaited parent selector: style a card that contains an image, a nav item with an active child, or a form field that holds an error. Keep it performant by anchoring to specific elements and constraining the inner selector with > or +. Container queries and :has() are safe defaults in 2026; view transitions are worth adopting now with the Firefox caveat in mind.