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.

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 Externí odkaz .

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 Externí odkaz a Can I Use Externí odkaz .

A nyní jdeme na novinky.

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 Externí odkaz , nebo v přednášce od Jhey Tompkinse z CSSDay '23 Supercharge your skills with creative coding Vol IX: You :has the power. Externí odkaz .

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 Externí odkaz ).

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" */
	}
}

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ů Externí odkaz .

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 Externí odkaz .

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

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).

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

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

K projektům State of CSS Externí odkaz a State of JS Externí odkaz , které analyzují trendy a vývoj ve frontend světě, přibylo v minulém roce State of HTML Externí odkaz . 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 Externí odkaz . Na výsledky si stejně jako u State of JS ale musíme ještě pár dní počkat.

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) Externí odkaz je pryč a 10% z celkového skóre se přesunulo na metriku Cumulative Layout Shift (CLS) Externí odkaz .

Další novinka přichází také do Core Web Vitals, kdy metriku First Input Delay (FID) nahradí Interaction to Next Paint (INP) Externí odkaz . 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) Externí odkaz , 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“ Externí odkaz .

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 Externí odkaz .

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