Chrome 146, Firefox 149, Safari 26.4: čo dostali frontend developeri v marci 2026

Container queries sú konečne vo všetkých troch prehliadačoch. Na toto som čakal dva roky.

Firefox 149 a Safari 26.4 v marci doplnili podporu name-only @container queries. To je varianta, kde nepotrebujete definovať container size, len pomenovať kontajner a pýtať sa na neho v CSS. Chrome to mal od verzie 111. Teraz to má každý.

Prečo na tom záleží

Ak ste niekedy stavali komponentový design system, viete, aký je to problém. Media queries sa pýtajú na veľkosť viewportu, nie na veľkosť kontajnera, v ktorom komponent žije. Takže rovnaký card komponent v sidebar-e a v main content area? Dva sety media queries, alebo (realistickejšie) jeden set, ktorý funguje „väčšinou."

Container queries toto riešia:

.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; }
}

Komponent sa prispôsobí podľa priestoru, ktorý má k dispozícii, nie podľa šírky okna. Name-only varianta to ide ešte ďalej: môžete sa pýtať na pomenovaný kontajner bez toho, aby ste definovali jeho typ, čo zjednodušuje nested layouts.

Ak Váš web ešte používa media queries tam, kde by stačili container queries, stojí za to to refaktorovať. Menej CSS, predvídateľnejšie správanie, jednoduchšia údržba. Písali sme o tom aj v kontexte responzívneho webu.

Scroll-triggered animácie v CSS

Chrome 146 pridal CSS-based scroll-position animation control. To je vec, na ktorú sme doteraz potrebovali JavaScript knižnice typu ScrollMagic alebo GSAP ScrollTrigger, teda elementy, ktoré sa animujú keď sa 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%;
}

Žiadny JavaScript. Žiadny IntersectionObserver. Žiadna knižnica na stiahnutie. Browser to zvládne natívne, čo znamená lepší výkon (animácia beží na compositor threade) a menší bundle.

Zatiaľ to má len Chrome, takže pre produkciu je to progressive enhancement. Funguje to ako bonus v Chrome, v ostatných prehliadačoch sa element jednoducho zobrazí bez animácie. Čo je vlastne OK.

Grid-lanes pre masonry

Safari 26.4 pridal display: grid-lanes. Masonry layout v CSS. Pinterest-štýl.

Úprimne? Neviem, čo si o tom myslieť. Safari to má, Chrome a Firefox nie. Takže je to zatiaľ demo. Kým to nemajú aspoň dva prehliadače, nepoužil by som to v produkcii. Ale sledovať to stojí za to, pretože masonry cez čistý CSS by bol game changer pre portfolio stránky, galérie a card-heavy layouty. Doteraz sme na to potrebovali JS knižnice (Masonry.js, Isotope) alebo CSS hacky s columns, ktoré neboli nikdy úplne správne.

A ešte pár vecí

Safari 26.4 pridal podporu min(), max() a clamp() v sizes atribúte pre responzívne obrázky. Malá zmena, ale praktická. Doteraz ste v sizes museli používať len media queries a fixné hodnoty.

Firefox 149 dostal CloseWatcher API, čo je natívna podpora pre Esc a Back tlačidlá na zatváranie dialógov, popoverov a modálov. Doteraz to mal len Chrome. Konečne môžete spoľahlivo zatvárať veci na mobiloch cez systémové Back gesto bez vlastného event handlera.

Popovery dostali dva updaty: Firefox 149 pridal hint hodnotu (popover, ktorý sa automaticky zavrie keď otvoríte iný hint popover, ale nezavrie bežné popovery) a Chrome 146 pridal trigger-scope property pre lepšiu kontrolu toho, čo sa s čím prepája.

Iterator.concat() je teraz v Chrome 146 aj Safari 26.4. Jednoduché zreťazenie iterátorov bez toho, aby ste ich najprv konvertovali na pole. Užitočné, ale nič, čo by menilo spôsob, akým píšete kód.

Kompletný prehľad je na web.dev. Ak hľadáte ďalšie tipy na moderný frontend, pozrite sa aj na 10 prvkov kvalitného webu.

Ak Váš web stojí na starších vzoroch a chcete vedieť, kde sa dá odstrániť zbytočný JavaScript, vieme spraviť frontend audit.