New to the web platform in March 2026: Container queries, scroll-triggered animations, and more

March 2026 has delivered a wealth of new capabilities to the web platform, with stable releases from Chrome, Firefox, and Safari introducing features that enhance both developer experience and user interactions. From more flexible container queries to sophisticated animation controls and improved JavaScript iteration, this month's updates represent meaningful progress toward a more expressive and performant web.

Stable browser releases: What's new in March

Optional container query conditions

Both Firefox 149 and Safari 26.4 have introduced support for name-only @container queries that require no conditions. This enhancement simplifies the container query pattern by allowing developers to match against containers based solely on their names, eliminating the need to specify size or style constraints when they're not necessary.

This change makes container queries more accessible for common use cases where you simply want to style elements based on their container context without complex matching logic. The feature is now available in Firefox 149 and Safari 16.4, with Chrome support following in Chrome 146.

Browser Support

Chrome	Firefox	Safari	Edge
146	149	26.4	146

Scroll-triggered animations

Chrome 146 introduces scroll-position-based control of animations, a significant advancement for creating scroll-driven interactions declaratively with CSS. This feature offloads animation work to a worker thread, improving performance by preventing main thread blocking during scroll operations.

The implementation includes both CSS declarative syntax and JavaScript interfaces for web animations, giving developers flexibility in how they create scroll-triggered effects. This is particularly valuable for parallax effects, reveal animations, and other scroll-based interactions that previously required complex JavaScript coordination.

Browser Support

Chrome	Firefox	Safari	Edge
146	146	x	146

The trigger-scope property

Alongside scroll-triggered animations, Chrome 146 introduces the trigger-scope property. This addition addresses a common pain point in animation development: name conflicts between animation triggers.

trigger-scope lets you limit the visibility of animation trigger names, helping to isolate animation-to-trigger interactions. This is especially useful in component-based architectures where multiple components might use similar trigger names, preventing global name conflicts without requiring developers to manually namespace everything.

Browser Support

Chrome	Firefox	Safari	Edge
146	146	x	146

Popover hint value

Firefox 149 now supports the hint value for the popover global attribute. This enhancement provides more fine-grained control over popover behavior by introducing a middle ground between auto-closing popovers and those that remain open.

Popovers with the hint value won't close auto popovers when displayed, but will close other hint popovers. This behavior is particularly useful for creating tooltip-like interfaces where you want only one hint popover visible at a time, but don't want it to interfere with other popover types.

Browser Support

Chrome	Firefox	Safari	Edge
133	133	x	133

Grid lanes and masonry layouts

Safari 26.4 supports display: grid-lanes, the display value that switches on a masonry-style layout. This brings native masonry layout capabilities to Safari, completing the picture for developers who want to create Pinterest-style grid layouts without resorting to JavaScript-based solutions.

Browser Support

Chrome	Firefox	Safari	Edge
x	x	26.4	x

Math functions in sizes attribute

Safari 26.4 adds support for using the min(), max(), and clamp() math functions in the sizes attribute of <img> elements. This enhancement provides more flexibility for responsive image loading by allowing developers to express complex size calculations directly in HTML.

This is particularly valuable for art-directed responsive images where the displayed size varies based on viewport dimensions in non-linear ways. Instead of requiring multiple breakpoints or JavaScript calculations, developers can now express these relationships declaratively.

JavaScript iterator sequencing

Both Chrome 146 and Safari 26.4 now support iterator sequencing, introducing Iterator.concat(...items) to create iterators by sequencing existing ones. This feature is now Baseline, meaning it's available across all major browsers.

Iterator sequencing simplifies working with multiple data sources that need to be processed in sequence. Instead of manually iterating through multiple iterators or flattening arrays, developers can now create a single iterator that traverses multiple sources in order.

Browser Support

Chrome	Firefox	Safari	Edge
146	146	147	26.4

CloseWatcher interface

Firefox 149 adds support for the CloseWatcher interface, allowing developers to implement components that can be closed using device-native mechanisms. This includes the Esc key on Windows or the Back key on Android, providing the same closing behavior as built-in dialogs and popovers.

This feature is particularly valuable for creating accessible, native-feeling components that work consistently across different devices and input methods. It abstracts away the complexity of handling various close mechanisms, letting developers focus on component functionality rather than interaction details.

Browser Support

Chrome	Firefox	Safari	Edge
126	126	x	126

Beta browser releases: What's coming next

Chrome 147 beta

Chrome 147 beta includes several exciting new features that will likely arrive in the next stable release:

• contrast-color(): A CSS function that returns either black or white depending on which provides the highest contrast against the argument color. This simplifies creating accessible color schemes and ensures text remains readable against any background.

• border-shape: New capabilities for defining complex border shapes beyond simple radius values, enabling more creative and organic border designs.

• element-scoped view transitions: Enhanced view transition support that's scoped to specific elements rather than applying globally, providing more granular control over transition effects.

Firefox 150 beta

Firefox 150 beta introduces several developer-focused features:

• CSS revert-rule keyword: A new keyword for CSS custom properties that reverts to the property's inherited value, providing more control over CSS variable inheritance.

• customeElementRegistry for Elements and DocumentOrShadowRoot: Enhanced custom element registration capabilities that work at more granular levels of the DOM tree.

• light-dark() for images: Image format selection based on the current color scheme, allowing developers to provide different image assets for light and dark themes without JavaScript.

Looking ahead

The March 2026 updates demonstrate the web platform's continued evolution toward more declarative, performant, and accessible features. The focus on animation controls, container queries, and improved JavaScript iteration reflects the community's priorities around creating richer, more interactive experiences while maintaining performance and accessibility.

These features also show a trend toward better cross-browser consistency, with many of the new capabilities being implemented across multiple browsers simultaneously. This collaborative approach benefits developers by reducing the need for complex fallbacks and polyfills.

As these features move from beta to stable releases in the coming months, developers will have increasingly powerful tools for creating sophisticated web experiences that work consistently across all modern browsers.