Novinky z Google I/O 2022 a proč prohlížeče najednou táhnou za jeden provaz?

Google na každoroční konferenci pro vývojáře mnohé oznámil a leccos ukázal. Akci jako celek nesleduji, ale během ní a po ní si ze záznamů a ohlasů na socsítích vyzobávám to, co mě nejvíc zajímá – frontend, a tedy HTML, CSS, performance a občas trochu JavaScript.

Mám pocit, že letos to bylo docela velké. A hlavně se jedna podstatná věc změnila – prohlížeče si méně konkurují a více spolupracují. Alespoň z pohledu webového vývojáře.

Proč na Vzhůru dolů píšu zrovna o letošním ročníku?

Letos jsem se rozhodl, že se o ty novinky musím podělit i s vámi, čtenáři Vzhůru dolů. Jednak zde vnímám dluh, protože jsem se téhle konferenci zde ještě přímo nevěnoval. Ale ten bezprostřední impulz k sepsání byl jiný.

Nejspíš patřím mezi nejstarší frontendisty v Česku. Nás, starochy, spojuje obvykle jedna věc – povyk kolem nových technologií a kolem nových úžasných možností prohlížečů nás nechává relativně chladnými. Už jsme to zažili mnohokrát a to také u technologií, které se prostě neujaly.

Zdá se mi ovšem, že Google I/O 2022 vcelku slušně vyhajpoval i relativně klidného Michálka. Novinek, zejména kolem CSS, je strašně moc a navíc bych řekl, že mnoho z nich může být onen pověstný „game-changer“.

Vezměme třeba Container Queries, selektor „rodiče“ :has nebo Cascade Layers (@layer). Už jen tato trojice pravděpodobně výrazně změní způsob, jak píšeme styly, pričemž zdaleka nejde o osamocené novinky v CSS.

Když jsem pátral po příčinách implementace tolika novinek a zároveň v tolika prohlížečích najednou, musel jsem skončit u Rachel Andrew.

Tolik novinek a podpora v prohlížečích k tomu. Díky Compat 2021 a Interop 2022!

Vývojáři prohlížečů totiž prakticky poprvé v historii spolupracují, aby vyřešili nekompatibility v podpoře webových technologiích. Loni byla výstupem iniciativa Compat 2021, která pomohla vyřešit nepříjemné rozdíly v implementaci gridu a flexboxu – a například také přidat použitelnost vlastnosti gap ve flexboxu.

Letošní iniciativa Interop 2022 má za úkol sladit priority ve vývoji a je domluveno, že prohlížeče co nejdříve naimplementují tyto vlastnosti:

• Color spaces & CSS color functions (funkce color-mix() - pro míchání barev známé ze Sassu, color-contrast() - pro automatický výběr správně kontrastní barvy)
• Jednotky pro viewport (dvh, lvh, svh doplní známé jednotky vh, vw)
• Scrollování (Scroll Snap, a vlastnosti jako scroll-behavior a overscroll-behavior)
• Subgrid (grid uvnitř gridu, který drží mřížku, mimochodem představuji v knížce)
• CSS Containment (vlastnost contain, nutné pro podporu Container Queries)

Už se naopak povedlo naimplementovat následující:

• Cascade layers (@layer pro možnost změny vrstvení CSS kvůli specificitě)
• accent-color (obarvujte formulářové prvky v CSS)
• <dialog> (nativní modál v HTML)
• <input type=datetime-local> (nativní nastavení data a času)
• bfcache (back/forward cache, zde se čekalo na Chrome)
• Vlastnost size-adjust (upravte velikost fontu)

Je toho více a vypadá to opravdu zajímavě. Podstatné je, že skupina lidí sdružená v této iniciativě stanovuje prioritizaci vývoje technologií i na základě průzkumů mezi vývojáři (např. State of CSS nebo průzkumy MDN), což je myslím docela silný důvod se takových dotazníkových šetření zúčastnit.

Průběžný vývoj můžete sledovat na webu Interop 2022 Dashboard.

Mimochodem, aktuálně tam skóring vede Safari, což je už několikátý signál o velkých změnách ve vedení vývoje tohoto zaostávajícího prohlížeče.

Abych to shrnul – vývoj specifikací a jejich implementací v prohlížečích byl překotný po celou dobu zhruba poslední dekády.

Změnilo se to, že výrobci prohlížečů synchronizují priority v implementaci. My vývojáři z toho budeme profitovat tak, že důležité novinky uvidíme v krátké době ve všech moderních prohlížečích.

Co mě na Google I/O dále zaujalo?

Tohle měl být stručný článek, takže si toho hodně budu muset nechat pro sebe. Nebo víte co? Ty další zajímavosti zde uvedu alespoň na jedné malé číslované hromádce.

• K rychlosti: Video, jak optimalizovat metriku LCP.
• Nová metrika Interaction to Next Paint (INP), která asi jednou nahradí FID. Video o jejím vzniku.
• Rozšířená realita v brýlích v kombinaci s překladačem umožňuje lidem povídat si spolu. Twitter.
• Chrome na Androidu umožní při platbách kartou generovat jednorázové číslo. Twitter.
• Page Transitions (možná) umožní animovat přechody mezi stránkami, tohle je fakt cool! Video.

Google pak důležité novinky shrnuje v článku.

Co zaujalo vás? Napište na Twitter nebo Facebook Vzhůru dolů.