Výsledky průzkumu State of CSS 2026 jsou venku a přinášejí zajímavý paradox. Anchor positioning, tedy možnost ukotvit prvek (tooltip, menu, popover) k jinému prvku čistě v CSS, je zároveň nejočekávanější novinkou i zdrojem největších potíží. Za ním následují View Transitions a funkce if(). Co to znamená pro tvorbu webů?
Proč vývojáři anchor positioning chtějí
Roky jsme pro tooltipy, rozbalovací nabídky a popovery používali JavaScriptové knihovny, které počítaly polohu prvku, hlídaly okraje okna a při scrollu ji přepočítávaly. Anchor positioning tohle přesouvá do CSS: prvek se ukotví k jinému a prohlížeč sám řeší polohu, i to, že se nabídka má otočit, když se nevejde. Méně kódu, méně chyb a lepší výkon.
Proč zároveň bolí
Podle průzkumu je největším problémem nejednotná implementace v prohlížečích. Funkce, která se v jednom prohlížeči chová bezvadně, se v jiném liší v detailech nebo chybí. Pro produkční web to znamená psát záložní řešení, testovat víc kombinací a rozhodovat, kdy už je bezpečné se na novinku spolehnout. Dobrou pomůckou je značka Baseline, která říká, kdy je funkce dostupná napříč hlavními prohlížeči.
View Transitions a if()
Na druhém místě skončily View Transitions, plynulé animované přechody mezi stavy nebo stránkami bez těžkých frameworků. Na třetím funkce if(), která umožní podmíněné hodnoty přímo ve stylech. Společné mají jedno: nahrazují dřív nutný JavaScript čistým CSS.
Souvislosti: nové verze prohlížečů a nástrojů
Průzkum vychází v době, kdy vyšly Chrome 152, Firefox 154 a Safari 26.6. Ekosystém se rychle posouvá i jinde: vyšly Angular 22, Astro 7, TypeScript 7 nebo npm 12. Vývojáři tak musejí sledovat víc než kdy dřív.
Co si z toho odnést
- Vyzkoušejte novinky na nekritických prvcích. Tooltip nebo popover je ideální místo pro první zkušenost s anchor positioningem.
- Připravte záložní řešení. Kde funkce chybí, musí web pořád fungovat, i když třeba jednodušeji.
- Sledujte Baseline. Rozhodujte podle skutečné podpory, ne podle nadšení z ukázek.
- Odstraňujte zbytečný JavaScript. Každý skript, který nahradí CSS, zrychluje web a zlepšuje Core Web Vitals.
- Myslete na přístupnost. Nativní prvky a popover API jsou přístupnější než ručně skládané komponenty.
Závěr
Moderní CSS dělá weby rychlejší a jednodušší, ale chce to vědět, kdy a jak novinky nasadit. Potřebujete web, který využívá současné technologie a přitom funguje všude? Ve Full-Net Servis vám ho navrhneme a postavíme. Ozvěte se nám.
