Chrome 146, Firefox 149, Safari 26.4: Co dostali frontend vývojáři v březnu 2026

Container queries jsou konečně ve všech třech prohlížečích. Na tohle jsem čekal dva roky.

Firefox 149 a Safari 26.4 v březnu doplnily podporu name-only @container queries. To je varianta, kde nepotřebujete definovat container size, jen pojmenovat kontejner a ptát se na něj v CSS. Chrome to měl od verze 111. Teď to má každý.

Proč na tom záleží

Jestli jste někdy stavěli komponentový design system, víte, jaký je to problém. Media queries se ptají na velikost viewportu, ne na velikost kontejneru, ve kterém komponenta žije. Takže stejná card komponenta v sidebaru a v main content area? Dva sety media queries, nebo (realističtěji) jeden set, který funguje „většinou".

Container queries tohle řeší:

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

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

@container card (max-width: 399px) {
  .card {
    flex-direction: column;
  }
}

Komponenta se přizpůsobí podle prostoru, který má k dispozici, ne podle šířky okna. Name-only varianta jde ještě dál. Můžete se ptát na pojmenovaný kontejner, aniž byste definovali jeho typ, což zjednodušuje nested layouts.

Jestli váš web ještě používá media queries tam, kde by stačily container queries, stojí za to to refaktorovat. Míň CSS, předvídatelnější chování, jednodušší údržba. Psali jsme o tom i v kontextu responzivního webu.

Scroll-triggered animace v CSS

Chrome 146 přidal CSS-based scroll-position animation control. To je věc, na kterou jsme dosud potřebovali JavaScriptové knihovny typu ScrollMagic nebo GSAP ScrollTrigger, tedy elementy, které se animují, když se k nim odscrollujete.

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

Žádný JavaScript. Žádný IntersectionObserver. Žádná knihovna ke stažení. Browser to zvládne nativně, což znamená lepší výkon (animace běží na compositor threadu) a menší bundle.

Zatím to má jen Chrome, takže pro produkci je to progressive enhancement. Funguje to jako bonus v Chrome, v ostatních prohlížečích se element jednoduše zobrazí bez animace. Což je vlastně OK.

Grid-lanes pro masonry

Safari 26.4 přidal display: grid-lanes. Masonry layout v CSS. Pinterest styl.

Upřímně? Nevím, co si o tom myslet. Safari to má, Chrome a Firefox ne. Takže je to zatím demo. Dokud to nemají aspoň dva prohlížeče, nepoužil bych to v produkci. Ale sledovat to stojí za to, protože masonry přes čisté CSS by byl game changer pro portfolio stránky, galerie a card-heavy layouty. Dosud jsme na to potřebovali JS knihovny (Masonry.js, Isotope) nebo CSS hacky s columns, které nebyly nikdy úplně správné.

A ještě pár věcí

Safari 26.4 přidal podporu min(), max() a clamp() v atributu sizes pro responzivní obrázky. Malá změna, ale praktická. Dosud jste v sizes museli používat jen media queries a fixní hodnoty.

Firefox 149 dostal CloseWatcher API, což je nativní podpora pro tlačítka Esc a Back pro zavírání dialogů, popoverů a modálů. Dosud to měl jen Chrome. Konečně můžete spolehlivě zavírat věci na mobilech přes systémové gesto Back bez vlastního event handleru.

Popovery dostaly dva updaty: Firefox 149 přidal hodnotu hint (popover, který se automaticky zavře, když otevřete jiný hint popover, ale nezavře běžné popovery) a Chrome 146 přidal property trigger-scope pro lepší kontrolu toho, co se s čím propojuje.

Iterator.concat() je teď v Chrome 146 i Safari 26.4. Jednoduché zřetězení iterátorů, aniž byste je nejdřív konvertovali na pole. Užitečné, ale nic, co by měnilo způsob, jakým píšete kód.

Kompletní přehled je na web.dev. Jestli hledáte další tipy na moderní frontend, podívejte se i na 10 prvků kvalitního webu.

Jestli váš web stojí na starších vzorech a chcete vědět, kde se dá odstranit zbytečný JavaScript, umíme udělat frontend audit.