Frontendové novinky v roce 2023

Nejprve si povíme něco o widgetu Baseline, který zpřehledňuje implementaci nových vlastností do prohlížečů, potom si projdeme seznam toho nejlepšího, co přišlo do CSS a HTML. Následovat bude State of HTML, nový sourozenec State of JS a State of CSS. Tyto průzkumy nám pomáhají sledovat nadcházející trendy v ekosystému vývoje webu. Nakonec se rychle podíváme na to, co se změnilo ve webové rychlosti a přístupnosti.

Text jsem vybavil množstvím odkazů na různé ukázky a další informace, které doporučuji nevynechat.

Baseline 2023

S widgetem Baseline začneme, protože pak už budete vždy vědět, které z nových vlastností lze již bezpečně používat. Baseline informuje o plné podpoře dané vlastnosti v hlavních prohlížečích a jejich mobilních verzích.

Widget definuje dvě fáze implementace vlastnosti: První, když je podporovaná ve všech hlavních prohlížečích (označení rokem začátku podpory). Druhá, ve které je již plně podporovaná 30 měsíců (widely available).

Aktuálně můžete Baseline využít v MDN a Can I Use.

A nyní jdeme na novinky.

:has() selektor

Určitě první a největší novinkou byl relační selektor :has(). Ten na začátku získal největší pozornost hlavně proto, že ho lze použít jako selektor rodiče h1:has(+ p) {}. A na to frontend komunita čekala fakt dlouho.

To ale není jediná jeho funkce a do závorek můžete zapsat jakýkoli relativní selektor, kombinovat ho s jinými selektory a dotazovat se tak například i na sousední elementy, nebo ho použít na filtraci.

Spoustu ukázek a odkazů na použití najdete v článku na Vzhůru dolů Relační selektor :has – zdaleka ne jen selektor rodiče, nebo v přednášce od Jhey Tompkinse z CSSDay '23 Supercharge your skills with creative coding Vol IX: You :has the power..

@container queries

Container queries nám umožňují přímé dotazování na kontejner nad komponentou, kterou chceme dynamicky měnit na základě velikosti kontejneru. V tom je velký rozdíl od media queries, a to při tvorbě komponent to chybělo jako sůl. Zatímco v media queries je jasné, z čeho se velikost počítá, při container queries je nejprve potřeba kontejner definovat pomocí container-type.

Style container queries

Container queries mohou vyhodnocovat nejen velikost, ale také styly kontejneru. Navíc pomocí CSS pravidla @property můžeme nastavit syntax pro proměnné v CSS (ukázka).

CSS nesting

Zanořování CSS, které známe z CSS preprocesorů, významně přispívá ke čitelnosti, modularitě a udržitelnosti šablon. V konečném důsledku též snižuje velikost výsledných CSS souborů.

Stejně jako v případě Sass nebo Less je možné využít selektor &.

.a {
	/* styles for element with class="a" */
	.b {
		/* styles for element with class="b" which is a descendant of class="a" */
	}
	&.b {
		/* styles for element with class="a b" */
	}
}

CSS subgrid

Subgrid rozšiřuje schopnost gridu tak, že potomek vytváří vnořenou mřížku - „subgrid“, která automaticky převezme definici mřížky rodičovského kontejneru. Nejčastěji se s tím setkáme např. při zarovnávání jednotlivých částí produktových karet v seznamu produktů. Více informací o subgridu naleznete na webu Vzhůru dolů.

Popover

Popover atribut řeší defaultní zobrazování vyskakovacích non-modálních oken. Element s atributem popover je defaultně skrytý pomocí display: none. Popover lze stylovat, odkazovat na jeho třídu a podobně. Plnou manipulaci s objektem pomocí JavaScriptu umožňuje Popover API.

Ukázky jednoduchých použití si prohlédněte na webu MDN.

Na rozdíl od HTML elementu <dialog>, který má plnou podporu prohlížečů od roku 2022, zde ještě čekáme na Firefox 124 (release 19.3.2024).

Ještě více novinek roku 2023

• Zkrácený zápis v media queries. Poslední, kdo s tím přišel, bylo Safari ve verzi 16.4.
• Atribut inert slouží k deaktivaci interaktivity prvků na stránce. Když má HTML element atribut inert, nelze na něm provádět běžné interakce, jako jsou kliknutí nebo focus.
• Nové barevné prostory a funkce v CSS.
• Lazy loading na iframech. Tady jsme dlouho čekali na podporu od Firefoxu a Safari.
• Přesnější definování časové křivky animace pomocí funkce linear().
• Funkce pro matematické výrazy v CSS jako calc(), min(), max() nebo clamp() jsou rozšířeny o goniometrické funkce sin(), cos() a další.
• Pseudo-selektory :user-valid a :user-invalid, které pomáhají s validací formulářových prvků po interakci uživatele.
• Select element s horizontálními oddělovači <hr />...

…a mnoho dalšího obsahu je v krásném článku CSS Wrapped: 2023! od Una Kravets, Bramus & Adam Argyle, který vyšel před Vánoci.

State of HTML

K projektům State of CSS a State of JS, které analyzují trendy a vývoj ve frontend světě, přibylo v minulém roce State of HTML. Výsledky těchto analýz nám poskytují ucelený pohled na to, jak jsou určité technologie a postupy vnímány a používány v komunitě vývojářů. Přípravu prvního ročníku si vzala komplet na starost Lea Verou. Na výsledky si stejně jako u State of JS ale musíme ještě pár dní počkat.

Web performance

Začátkem roku vyšel Lighthouse 10 a s ním i velká změna ve výpočtu Lighthouse Performance Score (LPS). Metrika Time To Interactive (TTI) je pryč a 10% z celkového skóre se přesunulo na metriku Cumulative Layout Shift (CLS).

Další novinka přichází také do Core Web Vitals, kdy metriku First Input Delay (FID) nahradí Interaction to Next Paint (INP). Google chce tímto krokem zpřísnit metriku v oblasti interaktivity webů. Tato změna je již dlouho dopředu ohlášená na březen 2024, aby všichni měli dost času na optimalizace.

Úpravu zaznamenala také metrika Largest Contentful Paint (LCP), kde jsou nyní vyřazeny z hodnocení obrázky s nízkou informační hodnotou, aby se předešlo jejich zneužití různými „LCP hacky“.

Přístupnost

Směrnici o přístupnosti webového obsahu WCAG vyšla v říjnu po 5 letech nová aktualizace, konkrétně ve verzi 2.2. Ta se zaměřuje hlavně na zpřístupnění navigace a interakce. Výraznou změnou je odstranění kritéria „Parsing“, čímž reaguje na schopnost prohlížeče správně interpretovat i chybný HTML kód. Více se dočtete na stránce WCAG 2.2 Is Here (Finally): 4 Takeaways.

Browserstack pro lepší testování přístupnosti vydal nové rozšíření do DevTools Accessibility Toolkit. Accessibility Toolkit.