March 2026 Web Platform Features and Their Limits

A product card can sit in a sidebar or fill the main catalogue. Sometimes its styling needs to know that context rather than the width of the browser window. The March web.dev roundup records name-only @container support in Firefox 149 and Safari 26.4. That is a specific query feature, not the debut of container queries as a whole.

The versions discussed here are the March releases. Check current compatibility against your project’s supported browsers before adopting them.

A name-only query tests context

This query matches a named ancestor container without testing its size.

.catalogue {
  container-name: product-list;
}

@container product-list {
  .card {
    border-radius: 0.5rem;
  }
}

If the card must change direction at a width threshold, use a size condition and an appropriate container-type, such as inline-size. Naming the container alone does not make it measurable.

That distinction matters in responsive design. A viewport query, container size query and name-only query answer different questions.

Triggering an animation differs from driving its progress

Chrome 146 introduced scroll-triggered animation controls. Crossing a scroll threshold can start, pause or reset a time-based animation. The Chrome guide explains the timeline-trigger and animation-trigger properties.

By contrast, animation-timeline: view() is a scroll-driven mechanism. The animation’s progress follows the scroll position. An example using that property does not demonstrate the newer trigger feature.

Use feature detection, keep content available without animation and respect prefers-reduced-motion. Removing a library can reduce downloaded code. It does not guarantee that every CSS effect runs on the compositor or outperforms the existing implementation.

Grid lanes needs a fallback

The roundup lists display: grid-lanes in Safari 26.4 for masonry-style layout. That March release does not establish support across the browser set you maintain.

Start with an ordinary grid that preserves the content order, then add masonry conditionally. Check reading and keyboard order as well as the visual arrangement.

The smaller additions solve separate problems

Safari 26.4 added min(), max() and clamp() in image sizes. They describe responsive image sizing rather than replacing source selection through srcset.

Firefox 149 added CloseWatcher for custom components that should respond to native close requests, such as Esc or Android Back. The component still needs event handling. Adding the API does not automatically fix an existing modal.

Firefox’s popover="hint" value leaves auto popovers open while dismissing other hints. Chrome’s trigger-scope belongs to animation triggers instead. It limits where trigger names are visible, rather than linking popovers to controls.

The same roundup records Iterator.concat() in Chrome 146 and Safari 26.4. It sequences iterators without first combining their values into an array. Its use still depends on the runtimes the project supports.

Choose a specific component and its fallback before refactoring the whole stylesheet. Our quality web elements guide covers the wider context. For an existing implementation, a frontend assessment can establish where CSS can safely replace JavaScript.