V další verzi Chromu je opět několik novinek. Sepsal jsem krátky článek o těch, které mě nejvíce zaujaly.
Datum vydání verze Chrome 88: 19.ledna 2021
CSS vlastnost: aspect-ratio
Podpora v prohlížečích: tuto vlastnost zatím podporuje bohužel jen Chrome právě od verze 88
Vlastnost aspect-ratio za Vás vyřeší poměr stran, stačí jen nastavit výšku nebo šířku. Následně nastavíte v jakém poměru má být div/obrázek/iframe. V mém případě mám nastavený poměr stran 1:1.
Příklad nastavení poměru stran 1:1
.content {
width: 25%;
text-align: center;
background: rgb(131,58,180);
background: linear-gradient(90deg, rgba(131,58,180,1) 0%, rgba(253,29,29,1) 50%, rgba(252,176,69,1) 100%);
color: white;
padding: 2em;
aspect-ratio: 1 / 1;
}
Simulace nepodpory obrázkových formátů (AVIF, WebP)
Další vlastnost v nové verzi, která se mi zalíbila je možnost vypnout podporu některých obrázkových formátů.
Vizualizace gradientu v dev tools
Web Vitals
Vizualizace nových metrik (LCP, FCP, FID, CLS)
LCP - Largest Contentful Paint (největší vykreslení obsahu)
FCP - First Contentful Paint (první vykreslený obsah)
FID - First Input Delay (metrika popisující čas, za který může uživatel nějakým způsobem provádět úlohy — interakce)
CLS - Cumulative Layout Shifting(metrika, která popisuje vizuální stabilitu)
Pro sledování těchto metrik slouží několik nástrojů, které detailněji rozebírají jedntolivou metriku a tipy pro vylepšení:
- Chrome dev tools - Lighthouse
- https://pagespeed.cz
- https://developers.google.com/speed/pagespeed/insights/?hl=cs
