Chrome 146, Firefox 149, Safari 26.4: Mit kaptak a frontend fejlesztők 2026 márciusában

Scroll-vezérelt animációk CSS-ben. JavaScript nélkül. Számomra ez a Chrome 146 legnagyobb híre.

Évek óta a ScrollMagichez, a GSAP ScrollTriggerhez vagy legalább egy IntersectionObserver callbackhez nyúltunk azért, amit a CSS most már natívan is tud:

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

Az animáció a compositor szálon fut, így simább, mint a JS-vezérelt alternatívák. Ráadásul nincs letöltendő könyvtár. Egyelőre csak Chrome-ban működik, tehát progresszív fejlesztés: Chrome-ban bónuszként működik, máshol az elemek egyszerűen animáció nélkül jelennek meg. A legtöbb webhely számára elfogadható kompromisszum.

Container queries mindenhol

A március másik nagy újdonsága a name-only @container query. Ezek már a Firefox 149-ben és a Safari 26.4-ben is működnek. A Chrome a 111-es verzió óta támogatja őket, de a „működik Chrome-ban" és a „mindenhol működik" két nagyon különböző állítás.

Aki már épített komponensalapú design rendszert, ismeri a fájdalmat. A media query-k a viewportra kérdeznek rá, nem a containerre. Ugyanaz a card komponens egy sidebarban és a fő tartalmi területen? Két breakpoint-készlet, vagy (reálisabban) egyetlen készlet, ami „többnyire" működik.

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

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

A komponens a rendelkezésére álló helyhez igazodik, nem az ablak szélességéhez. A name-only query-k még tovább mennek. Lekérdezhet egy elnevezett containert anélkül, hogy meghatározná a típusát, ami egyszerűsíti a mélyen egymásba ágyazott elrendezéseket. Ha az Ön webhelye még mindig media query-ket használ ott, ahol a container query-k tisztábbak lennének, talán ideje egy refaktorálásnak. Erről a reszponzív webdesign kapcsán írtunk.

Grid-lanes a masonryhez

A Safari 26.4 hozzáadta a display: grid-lanes-t. Masonry elrendezés tiszta CSS-ben. Pinterest-stílusban.

Őszintén? Még nem tudom, mit gondoljak róla. A Safari támogatja, a Chrome és a Firefox nem. Amíg legalább két böngésző nem támogatja, nem használnám éles környezetben. De érdemes figyelni rá. A tiszta CSS masonry jelentős előrelépés lenne a portfólióoldalak, galériák és card-alapú elrendezések számára. Évek óta Masonry.js-t, Isotope-ot vagy CSS column hackeket használunk, és egyik sem érződött soha teljesen helyesnek.

A kisebb újdonságok

A Safari 26.4 támogatja a min(), max() és clamp() függvényeket a sizes attribútumon belül a reszponzív képekhez. Kicsi, de praktikus. Korábban a sizes csak media query-ket és fix értékeket fogadott el.

A Firefox 149 kiadta a CloseWatcher-t, azt a natív API-t, amely az Esc és a Vissza gomb kezelését végzi a dialógusok, popoverek és modálok bezárásához. A Chrome-ban jelent meg először. Mostantól mobilon megbízhatóan bezárhat dolgokat a rendszer Vissza gesztusával, saját eseménykezelő írása nélkül.

A popoverek két frissítést kaptak. A Firefox 149 hozzáadta a hint értéket (egy popover, amely automatikusan bezáródik, amikor másik hintet nyit meg, de a normál popovereket nem zárja be), a Chrome 146 pedig a trigger-scope tulajdonságot a jobb szabályozásért, hogy mi mit vált ki.

Az Iterator.concat() megérkezett a Chrome 146-ba és a Safari 26.4-be, iterátorokat láncol össze anélkül, hogy előbb tömbbé alakítaná őket. Hasznos, de nem változtatja meg, hogyan ír kódot a mindennapokban.

A teljes részletek a web.dev oldalon találhatók. További frontend alapokért nézze meg a minőségi webelemekről szóló útmutatónkat.

Ha az Ön webhelye régebbi mintákra épül, és szeretné tudni, hol hagyhat el felesleges JavaScriptet, el tudunk végezni egy frontend auditot.