Chrome 146, Firefox 149, Safari 26.4: what frontend developers got in March 2026

Scroll-driven animations in CSS. No JavaScript. That's the headliner from Chrome 146 for me.

We've been reaching for ScrollMagic, GSAP ScrollTrigger, or at minimum an IntersectionObserver callback for years to do what CSS can now do natively:

@keyframes fade-in {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

.reveal {
  animation: fade-in linear;
  animation-timeline: view();
  animation-range: entry 0% entry 100%;
}

The animation runs on the compositor thread, so it's smoother than JS-driven alternatives. And no library to download. Chrome-only for now, so it's progressive enhancement, works as a bonus in Chrome, elements just appear without animation elsewhere. Acceptable tradeoff for most sites.

Container queries everywhere

The other big one from March: name-only @container queries now work in Firefox 149 and Safari 26.4. Chrome has had them since 111, but "works in Chrome" and "works everywhere" are very different statements.

If you've built component-based design systems, you know the pain. Media queries ask about the viewport, not the container. Same card component in a sidebar and in the main content area? Two sets of breakpoints, or (more realistically) one set that works "mostly."

.card-wrapper {
  container-name: card;
  container-type: inline-size;
}

@container card (min-width: 400px) {
  .card { flex-direction: row; }
}

The component adapts based on the space it has, not the window width. Name-only queries take it further: you can query a named container without defining its type, which simplifies deeply nested layouts. If your site still uses media queries where container queries would be cleaner, it might be time for a refactor. We wrote about this in the context of responsive web design.

Grid-lanes for masonry

Safari 26.4 added display: grid-lanes. Masonry layout in pure CSS. Pinterest-style.

Honestly? I'm not sure what to make of it yet. Safari has it, Chrome and Firefox don't. Until at least two browsers ship it, I wouldn't use it in production. But it's worth watching: pure CSS masonry would be significant for portfolio pages, galleries, and card-heavy layouts. We've been using Masonry.js, Isotope, or CSS column hacks for years, and none of them have ever felt quite right.

The smaller additions

Safari 26.4 supports min(), max(), and clamp() inside the sizes attribute for responsive images. Small but practical: previously sizes only accepted media queries and fixed values.

Firefox 149 shipped CloseWatcher, the native API for handling Esc and Back button to close dialogs, popovers, and modals. Chrome had it first. Now you can reliably close things on mobile via the system Back gesture without writing your own event handler.

Popovers got two updates: Firefox 149 added the hint value (a popover that auto-dismisses when you open another hint, but doesn't close regular popovers), and Chrome 146 added trigger-scope for better control over what triggers what.

Iterator.concat() landed in Chrome 146 and Safari 26.4, chaining iterators without converting to arrays first. Useful, won't change how you write code day to day.

Full details on web.dev. For more frontend fundamentals, see our guide to quality web elements.

If your site is built on older patterns and you want to know where you can drop unnecessary JavaScript, we can do a frontend audit.