Chrome 146, Firefox 149, Safari 26.4: Was Frontend-Entwickler im März 2026 bekamen

Scroll-gesteuerte Animationen in CSS. Kein JavaScript. Das ist für mich die Schlagzeile aus Chrome 146.

Jahrelang haben wir zu ScrollMagic, GSAP ScrollTrigger oder zumindest einem IntersectionObserver-Callback gegriffen, um das zu tun, was CSS jetzt nativ kann:

@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%;
}

Die Animation läuft auf dem Compositor-Thread und ist damit flüssiger als JS-gesteuerte Alternativen. Und keine Bibliothek zum Herunterladen. Vorerst nur in Chrome, also Progressive Enhancement: In Chrome funktioniert sie als Bonus, anderswo erscheinen die Elemente einfach ohne Animation. Für die meisten Websites ein akzeptabler Kompromiss.

Container Queries überall

Die andere große Neuerung im März sind name-only @container-Queries. Sie funktionieren jetzt in Firefox 149 und Safari 26.4. Chrome hat sie seit Version 111, aber „funktioniert in Chrome" und „funktioniert überall" sind zwei sehr unterschiedliche Aussagen.

Wer schon einmal komponentenbasierte Design-Systeme gebaut hat, kennt den Schmerz. Media Queries fragen nach dem Viewport, nicht nach dem Container. Dieselbe Card-Komponente in einer Sidebar und im Hauptinhaltsbereich? Zwei Sätze von Breakpoints, oder (realistischer) ein Satz, der „meistens" funktioniert.

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

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

Die Komponente passt sich an den verfügbaren Platz an, nicht an die Fensterbreite. Name-only-Queries gehen noch weiter: Sie können einen benannten Container abfragen, ohne dessen Typ zu definieren, was tief verschachtelte Layouts vereinfacht. Wenn Ihre Website noch Media Queries dort verwendet, wo Container Queries sauberer wären, ist vielleicht ein Refactoring an der Zeit. Darüber haben wir im Kontext von responsivem Webdesign geschrieben.

Grid-Lanes für Masonry

Safari 26.4 hat display: grid-lanes hinzugefügt. Masonry-Layout in reinem CSS. Pinterest-Stil.

Ehrlich? Ich weiß noch nicht recht, was ich davon halten soll. Safari hat es, Chrome und Firefox nicht. Solange es nicht mindestens zwei Browser unterstützen, würde ich es nicht in der Produktion einsetzen. Aber es lohnt sich, es im Auge zu behalten: Masonry in reinem CSS wäre für Portfolio-Seiten, Galerien und card-lastige Layouts eine bedeutende Sache. Jahrelang haben wir Masonry.js, Isotope oder CSS-Column-Hacks verwendet, und keines davon hat sich je ganz richtig angefühlt.

Die kleineren Neuerungen

Safari 26.4 unterstützt min(), max() und clamp() innerhalb des sizes-Attributs für responsive Bilder. Klein, aber praktisch: Bisher akzeptierte sizes nur Media Queries und feste Werte.

Firefox 149 hat CloseWatcher ausgeliefert, die native API für den Umgang mit Esc- und Zurück-Taste zum Schließen von Dialogen, Popovers und Modals. Chrome hatte sie zuerst. Jetzt können Sie auf Mobilgeräten Elemente zuverlässig über die System-Zurück-Geste schließen, ohne einen eigenen Event-Handler zu schreiben.

Popovers haben zwei Updates bekommen: Firefox 149 hat den Wert hint hinzugefügt (ein Popover, das sich automatisch schließt, wenn Sie einen anderen Hint öffnen, aber reguläre Popovers nicht schließt), und Chrome 146 hat trigger-scope für eine bessere Kontrolle darüber ergänzt, was was auslöst.

Iterator.concat() ist in Chrome 146 und Safari 26.4 gelandet und verkettet Iteratoren, ohne sie zuerst in Arrays umzuwandeln. Nützlich, ändert aber nichts an der Art, wie Sie im Alltag Code schreiben.

Alle Details finden Sie auf web.dev. Für weitere Frontend-Grundlagen sehen Sie sich unseren Leitfaden zu den Elementen einer guten Website an.

Wenn Ihre Website auf älteren Mustern basiert und Sie wissen möchten, wo Sie unnötiges JavaScript entfernen können, führen wir gern ein Frontend-Audit durch.