Webová platforma v březnu 2026. Co použít v projektu

Produktová karta může být v úzkém panelu i v hlavním katalogu. CSS proto někdy potřebuje znát kontejner, nikoli šířku celého okna. Březnový přehled web.dev uvádí podporu name-only @container ve Firefoxu 149 a Safari 26.4. Jde o konkrétní část container queries, ne o jejich první uvedení.

Článek zachycuje březnová vydání. Před použitím ověřte současnou podporu a prohlížeče svých návštěvníků.

Pojmenovaný kontejner nepotřebuje podmínku velikosti

Name-only query zjišťuje přítomnost kontejneru s daným názvem. Vzhled komponenty se může měnit podle kontextu bez měření její šířky.

.catalogue {
  container-name: product-list;
}

@container product-list {
  .card {
    border-radius: 0.5rem;
  }
}

Ukázka neobsahuje šířkovou podmínku. Pro změnu karty z řádku na sloupec při určité šířce potřebujete size query a odpovídající container-type, například inline-size. Samotné pojmenování velikost neměří.

U responzivního webu tedy vybírejte query podle otázky. Viewport řeší okno, size query rozměr kontejneru a name-only query jeho pojmenovaný kontext.

Scroll-triggered a scroll-driven nejsou totéž

Chrome 146 přinesl scroll-triggered animace. Překročení zvolené hranice posunu může spustit, pozastavit nebo resetovat časovou animaci. Dokumentace Chrome používá timeline-trigger a animation-trigger.

Naproti tomu animation-timeline: view() řídí průběh animace podle polohy posunu. Jde o scroll-driven mechanismus. Ukázka s touto vlastností nedokládá podporu nových triggerů.

V produkci použijte detekci podpory a obsah ponechte čitelný i bez efektu. Respektujte prefers-reduced-motion. Odstranění knihovny může zmenšit stahovaný kód, ale plynulost závisí na animovaných vlastnostech i zařízení. CSS samo nezaručuje compositor ani lepší výkon.

Grid lanes potřebuje náhradní rozložení

Safari 26.4 přidal display: grid-lanes pro masonry rozložení. Březnový stav podpory nelze zaměnit za podporu ve všech prohlížečích.

Galerie má zůstat použitelná i bez této hodnoty. Nejprve připravte běžný grid a až potom podmíněné masonry. Zkontrolujte pořadí obsahu při čtení a ovládání klávesnicí.

Další novinky řeší různé problémy

Podle březnového přehledu Safari 26.4 doplnil min(), max() a clamp() v atributu sizes. Pomáhají vyjádřit velikost responzivního obrázku, nenahrazují však výběr zdroje pomocí srcset.

Firefox 149 přidal CloseWatcher pro vlastní komponenty zavírané mechanismem zařízení, například Esc nebo Android Back. Aplikace musí příslušné události zpracovat, API samo neopraví každý modal.

Hodnota popover="hint" ve Firefoxu 149 ponechává otevřený auto popover, ale zavírá jiné hint popovery. trigger-scope v Chrome 146 má jiný účel. Omezuje viditelnost názvů animačních triggerů, neslouží k párování popoverů.

Přehled uvádí také Iterator.concat() v Chrome 146 a Safari 26.4. Umožňuje postupně procházet více iterátorů bez předchozího slučování jejich hodnot do pole. Použití stále závisí na podporovaném runtime projektu.

Při úpravě začněte konkrétní komponentou a jejím náhradním chováním. Další souvislosti popisuje článek o prvcích kvalitního webu. Pokud potřebujete zjistit, kde CSS může nahradit existující JavaScript, posoudíme konkrétní rozhraní.