CSS místo JavaScriptu: co už prohlížeč umí sám

Nejdřív to, co vás ochrání před zbytkem článku

Tohle je jediná věc, kterou si odsud opravdu odneste: než něco nasadíte, podívejte se na Baseline. Je to společný ukazatel výrobců prohlížečů a má dva stupně:

• Newly available — funguje v nejnovějších verzích všech hlavních prohlížečů. Ne ve starších.
• Widely available — je to venku tak dlouho, že na to narazíte i na zařízeních, která nikdo neaktualizuje. Tady se dá nasazovat bez přemýšlení.

Píšu to takhle natvrdo, protože i tenhle článek zestárne. Stavy níž jsou z října 2026. Za rok si je ověřte znovu — a hlavně si je ověřte u zdroje, ne v článku, který tvrdí, že „je rok 2027 a tohle už konečně můžete“.

Co dneska opravdu nahradí knihovnu

První dva řádky jsou ty, kvůli kterým článek píšu. Bublina, která se umí sama odsunout, aby nevylezla z obrazovky, byla roky důvod, proč si na web přitáhnete knihovnu. Od ledna 2026 to umí CSS.

Scroll-driven animace: tady se lže nejvíc

Letos jsem viděl několik článků s nadpisem ve smyslu „je čas odejít od IntersectionObserveru“ a „nativní CSS nahradí GSAP a Framer Motion“. Zní to skvěle. Animovat něco podle polohy scrollu, bez jediného řádku JavaScriptu, je přesně to, co bych chtěl.

Jenže MDN vede animation-timeline jako „limited availability“, tedy výslovně ne Baseline, s poznámkou, že to nefunguje v některých nejpoužívanějších prohlížečích.

Odstupňovat se to dá přímo v CSS — prohlížeč sám řekne, jestli tu vlastnost zná:

@supports (animation-timeline: scroll()) {
  /* tady teprve ta hezká verze */
}

Kolik to ušetří

Abych nemluvil obecně. Když jsem stavěl tenhle web, zvažoval jsem běžnou animační knihovnu. Zvážil jsem i cenu:

Celý vzhled webu je menší než třetina jedné knihovny, která by uměla jen pohyb. Všechno, co tu vidíte — prolínání, posuny, rozbalování, ořezy, podtrhávání — je čisté CSS. Jediná výjimka je plynulé sledování kurzoru a to je pár řádků.

Nejlepší na tomhle období je, že z webu mizí knihovny, které tam byly jen proto, že to prohlížeč neuměl. Horší je, že každý rok vyjde vlna článků o tom, co už „konečně můžete“ — a půlka z toho ještě nemůžete. Rozdíl mezi tím je jedno kliknutí na Baseline.

Marian Bendák

Jak to zavádět, aby to nepadalo

1. Postavte to tak, aby to fungovalo bez toho

   Nejdřív verze, která funguje všude. Teprve pak vrstva navíc. Ne naopak — dodělávat záchranu pro starší prohlížeče zpětně je práce, kterou nikdo nezaplatí.

2. Zeptejte se prohlížeče, ne statistik

   @supports v CSS a CSS.supports() v JavaScriptu. Je to spolehlivější než rozhodovat podle toho, jaké prohlížeče máte v návštěvnosti.

3. Respektujte vypnuté animace

   Kdo má v systému nastavené omezení pohybu, nemá ho dostat. Je to jedno pravidlo v CSS a týká se to lidí, kterým se z pohybu dělá nevolno.

4. Měřte, co to stálo

   Po každém přidání efektu se podívejte na LCP na mobilu. Hezká animace, kvůli které stránka čeká, je ztráta.

Co z toho plyne pro vás, když si objednáváte web

• Ptejte se, kolik knihoven web potáhne a na co. „Kvůli animacím“ je dnes slabá odpověď.
• Ptejte se, co se stane v prohlížeči, který tu vlastnost nezná. Dobrá odpověď zní „nic, jen se to nehýbe“.
• Nekupujte si efekt, kvůli kterému se čeká na obsah. To je výměna, kterou platí návštěvník.

Jak se tohle promítá do ceny a do rychlosti, mám rozepsané u ceny webu a u rychlosti. Jak jsem podle těchhle pravidel stavěl tenhle web, je v samostatném článku.

Co s tím dál

Jestli máte web, který táhne knihovny kvůli věcem, co dnes umí prohlížeč, jde to většinou odebrat bez předělávání vzhledu. Projdeme to na konzultaci zdarma.