💻 Nejdůležitější frontend novinky 05.04.-12.04.2026
Forntend vývoj novinky 💻
05.04.-12.04.2026
Chrome 145 přináší do CSS multisloupcového layoutu zalamování do řádků
Chrome 145 přidal vlastnosti column-wrap a column-height, které řeší dlouhodobý problém CSS multi-column layoutu: místo vodorovného posouvání může přetékající obsah nově přecházet do dalšího řádku a stránka zůstává přirozeně svisle scrollovatelná. Díky tomu se z multisloupcového toku stává praktičtější 2D rozvržení vhodné třeba pro pevně vysoké bloky, editorial layouty nebo vertikální „stránkování“. Nejde ale o univerzální náhradu za Grid nebo Flexbox, protože u dynamického obsahu a přesného zarovnání mají tyto přístupy stále navrch. Zásadní limit je i podpora: v dubnu 2026 fungují novinky jen v Chrome 145+, zatímco Firefox, Safari ani Edge je ještě neumí.
- Pro frontend praxi je to zajímavé hlavně tam, kde máte předvídatelnou výšku obsahu — například karty, magazínové sekce nebo rozložení textu do více sloupců bez nepříjemného horizontálního scrollu.
- V kombinaci se
scroll-snap-type: y mandatorylze vytvořit plynulé vertikální přepínání „stránek“ bez JavaScriptu, což se hodí pro obsahové carousely nebo fullscreen čtečky. - Pokud je obsah výškově nevyrovnaný nebo plně dynamický z CMS či od uživatelů, layout zůstává nepredikovatelný a často bude stále vhodnější sáhnout po CSS Gridu, Flexboxu nebo případně Masonry.
Čím v CSS nahradit !important bez rozbití kaskády
Používání !important sice rychle vyřeší konflikt stylů, ale zároveň obchází běžná pravidla CSS kaskády a zhoršuje údržbu projektu. Článek ukazuje čistší alternativy, které dávají lepší kontrolu nad prioritou pravidel bez zbytečného přepisování dalších selektorů. Mezi hlavní přístupy patří cascade layers, práce se specificitou a správné pořadí načítání stylů. !important má dál své místo, ale spíš ve výjimečných případech, třeba u přístupnosti, utility tříd nebo přepisování cizích stylů.
- Nejpraktičtější náhradou jsou cascade layers: dovolí předem určit, které skupiny stylů mají přednost, takže lze přehledně přepisovat třeba framework nebo základní styly komponent bez boje se specificitou.
-
Konflikty často vyřeší i úprava specificity a pořadí: pomoci může
:is(), opakování třídy nebo prosté přesunutí pravidla níž do souboru, pokud mají selektory stejnou váhu. -
!importantdávejte jen tam, kde je záměr absolutní priorita: typicky u tříd jako.visually-hidden, uživatelských stylů, omezení animací podleprefers-reduced-motionnebo při přepisování inline stylů z JavaScriptu.
MDN popsalo přestavbu frontendu: méně balastu, více web komponent a rychlejší vývoj
MDN vysvětluje, proč zahodilo starý Reactový frontend zatížený technickým dluhem a nahradilo ho architekturou postavenou hlavně na web komponentách a vlastních server komponentách. Cílem bylo zjednodušit práci s interaktivními prvky uvnitř statického obsahu, omezit zbytečně posílaný JavaScript i CSS a zrychlit načítání webu. Nové řešení skládá stránky na serveru, interaktivitu přidává jen tam, kde je opravdu potřeba, a využívá progresivní vylepšení pro moderní webové technologie. Vedle výkonu si MDN pochvaluje i výrazně lepší vývojářské prostředí.
- Pro frontend je podstatné, že MDN nahradilo „React jako obal kolem statického HTML“ za web komponenty v Lit, které lze vkládat přímo do obsahu a načítat jen na stránkách, kde se skutečně používají.
- Každá komponenta má oddělený JavaScript i CSS, takže se uživatelům neposílá jeden velký balík stylů a skriptů; server navíc přidává jen styly potřebné pro konkrétně vyrenderované komponenty.
- Z praktického hlediska je zajímavé i nasazení Declarative Shadow DOM, progresivního vylepšování a Rspacku: lokální vývoj se podle MDN zkrátil zhruba ze dvou minut na dvě sekundy a prostředí je mnohem blíž produkci.
Chrome 147 přináší lokální view transitions, chytřejší kontrast barev a nepravidelné rámečky v CSS
Chrome 147 postupně vychází a mezi hlavní novinky patří view transitions navázané přímo na konkrétní HTML element, nová CSS funkce contrast-color() a vlastnost border-shape. Pro frontend vývojáře to znamená jemnější kontrolu nad animacemi, jednodušší plnění požadavků na přístupnost a nové možnosti stylování mimo klasické obdélníkové hranice. Jde o praktické změny, které se dají využít jak v moderních aplikacích, tak v běžném webovém rozhraní.
-
Element-scoped view transitions umožňují spouštět
startViewTransition()nad libovolným HTML prvkem, takže lze dělat souběžné i vnořené přechody bez zablokování zbytku stránky. - CSS contrast-color() automaticky vrací černou nebo bílou podle toho, která barva má lepší kontrast k zadanému podkladu, což usnadňuje dodržení pravidel přístupnosti.
- Vlastnost border-shape otevírá cestu k nepravoúhlým rámečkům, například ve tvaru kruhu nebo polygonu, takže lze vytvářet výraznější komponenty bez složitých obcházek.
Chrome 147 v DevTools přidává chytřejší AI, generování kódu a praktičtější ladění
Chrome 147 přináší do DevTools několik užitečných novinek, které míří hlavně na rychlejší analýzu stránek a pohodlnější práci vývojářů. AI asistent nově umí sám vybrat kontext podle dotazu, generování kódu se posouvá z návrhů na plné doplňování a Device Mode dostal modernější ovládání. DevTools také automaticky dekódují komprimované odpovědi v síťových požadavcích a přidávají další drobná vylepšení pro výkon, přístupnost i inspekci stylů.
- AI asistent už nepotřebuje předem ručně vybraný objekt: zvládne odpovědět i na obecné dotazy typu které požadavky jsou nejpomalejší nebo jaké problémy s výkonem stránka má, a podle potřeby si sám přepne kontext.
- V Console a Sources lze nově z přirozeného komentáře vygenerovat celý kus kódu přes klávesovou zkratku, což může urychlit psaní kontrol, skriptů i opakovaných debugovacích úloh.
- Pro praxi je důležité i snadnější ladění: Network panel zobrazuje čitelný obsah gzip a deflate odpovědí, panely Styles, Computed a Properties podporují filtrování regulárními výrazy a Device Mode lépe simuluje orientaci zařízení.
Chrome 148 beta přináší nové CSS možnosti, lazy loading médií a vestavěné AI API
Chrome 148 beta rozšiřuje webovou platformu o několik praktických novinek pro frontend i výkonnost webů. Mezi hlavní změny patří lazy loading pro video a audio, jednodušší container queries v CSS, návrat SharedWorker na Androidu a zpřístupnění Prompt API pro web. Přibyly i menší, ale užitečné úpravy chování pro drag and drop, text-overflow, Resource Timing nebo práci s obrázky bez zbytečného znovunačítání. Beta je dostupná pro Android, ChromeOS, Linux, macOS i Windows.
- Frontend vývojářům pomůže hlavně rozšíření CSS: nově lze používat container queries jen podle
container-name, v@supportspřibyla detekce podpory CSS at-rules a nové klíčové slovorevert-ruleusnadní podmíněné styly. - Pro výkon je důležité přidání
loading="lazy"k prvkůmvideoaaudio, znovupoužití obrázků se stejnýmsrci přiCache-Control: no-storea nový údajcontentTypevPerformanceResourceTimingpro přesnější měření zdrojů. - Na úrovni webových API zaujme zejména Prompt API s přístupem k lokálnímu AI modelu v prohlížeči, podpora Web Serial API na Androidu, lokalizace položek ve web app manifestu a nové režimy pro autentizaci a sdílené workery.
Únorový Baseline přináší bezpečnější web, lepší CSS a rychlejší přenos dat
Únor 2026 rozšířil Baseline o několik funkcí, které už jsou dostupné napříč hlavními prohlížeči. Nově se mezi ně řadí CSS funkce shape(), API Trusted Types, metody Map.getOrInsert() a getOrInsertComputed() i komprese Zstandard pro HTTP. Širší dostupnost získal také atribut dirname, který zlepšuje práci s vícejazyčnými formuláři. Současně odstartoval Interop 2026, jehož cílem je dál sjednocovat podporu webových funkcí mezi prohlížeči.
-
shape()usnadňuje tvorbu složitějších tvarů proclip-pathaoffset-pathběžnou CSS syntaxí, včetně jednotek,calc()a proměnných, což je praktičtější než psaní SVG cest v řetězci. - Trusted Types posouvají ochranu proti DOM-based XSS útokům přímo do platformy: citlivá API jako
innerHTMLneboeval()mohou přijímat jen předem ošetřená data podle pravidel v CSP. - Z praxe potěší i menší ergonomická vylepšení: nové metody pro
Mapzkracují běžný kód pro práci s výchozími hodnotami, Zstandard může zrychlit načítání díky účinné kompresi adirnamepomáhá správně zpracovat směr textu ve formulářích.
Jak v praxi opravit LCP, CLS a INP bez slepého ladění
Článek shrnuje praktický postup, jak na reálných projektech diagnostikovat a opravovat metriky Core Web Vitals: LCP, CLS a INP. Klíčové je nezačínat optimalizací naslepo, ale nejdřív přesně určit problém pomocí PageSpeed Insights, Lighthouse a Chrome DevTools. U LCP pomáhá hlavně zrychlit načtení klíčového obsahu, u CLS rezervovat místo prvkům a zabránit posunům rozložení, u INP omezit těžký JavaScript na hlavním vlákně. Autor zdůrazňuje průběžné testování po každé jednotlivé změně místo hromadných zásahů bez ověření výsledku.
- Pro frontend je nejdůležitější správně určit viníka: u LCP bývá problém v hero obrázku, blokujícím CSS nebo pomalé odpovědi serveru, u CLS v chybějících rozměrech obrázků a dynamicky vkládaném obsahu, u INP v dlouhých JavaScriptových úlohách a neefektivních handlerech.
- V praxi fungují konkrétní zásahy jako preload důležitých zdrojů, neodkládat obsah nad přehybem pomocí lazy loadingu, nastavovat width a height u médií, používat
transformmísto změn rozložení a přesouvat náročnou logiku do Web Workers. - Hlavní přínos není jen lepší skóre v nástrojích, ale rychlejší web pro skutečné uživatele, lepší SEO a vyšší konverze; zvlášť u WordPressu článek doporučuje lehčí šablony, méně pluginů, cache a CDN.
Jak zlepšovat UX ve starých systémech bez riskantního přepisu
U legacy systémů nebývá největší problém jen zastaralé rozhraní, ale hlavně to, že na nich visí klíčové procesy, zvyky uživatelů a řada dalších integrací. Článek doporučuje nezačínat velkým přepisem od nuly, ale nejdřív zmapovat workflow, závislosti a kritická místa, která nejvíc poškozují uživatelský zážitek. Nejbezpečnější cesta bývá postupná migrace po částech, ideálně s průběžným testováním s reálnými uživateli a zapojením stakeholderů. Cílem není migrovat jen UI, ale i samotný způsob práce tak, aby nový systém od prvního dne nenarušil chod byznysu.
- Pro frontend a produktové týmy je klíčové nejdřív odhalit, kde legacy část rozbíjí celý flow — i jediný nefunkční krok může znehodnotit dojem z jinak moderní aplikace.
- V praxi dává největší smysl inkrementální nebo paralelní migrace, protože přináší rychlejší zlepšení UX, menší riziko výpadků a lepší prostor pro validaci s power users.
- Nejde jen o redesign obrazovek: je nutné zmapovat business logiku, návaznosti a integrace, jinak hrozí, že nový systém vizuálně zlepšíte, ale provozně rozbijete.
React míří do éry kompilátoru, který nahradí ruční memoizaci
React Compiler přináší zásadní změnu v tom, jak se budou optimalizovat React aplikace: místo ručního nasazování useMemo, useCallback a React.memo má optimalizace řešit kompilátor automaticky při buildu. Vývojář tak bude psát běžný, čitelnější JavaScript a React sám rozpozná, co je potřeba znovu přepočítat a co může zůstat beze změny. Cílem není jen vyšší výkon, ale hlavně předvídatelnější chování a méně chyb způsobených špatně nastavenou memoizací. Důležitou podmínkou ale zůstává dodržování pravidel Reactu, zejména čistoty komponent a neměnnosti dat.
- Pro frontend vývoj to znamená méně boilerplate kódu a menší závislost na useMemo a useCallback, které se mají postupně stát spíš zpětně kompatibilní než doporučenou cestou.
- Kompilátor analyzuje tok dat, stabilitu hodnot a závislosti mezi částmi komponent, takže React může provádět jemnější a přesnější aktualizace bez změny známého programovacího modelu.
- Na přechod se vyplatí připravit už teď: zapnout Strict Mode, používat lintování hooků, vyhýbat se mutacím objektů a stavět menší, čisté komponenty, které se lépe analyzují i optimalizují.
Ještě nemáte odběr?
Nenechte si utéct žádnou důležitou novinku. Přidejte se k nám a získejte pravidelný informační přehled čistých faktů přímo do své schránky.