Letem frontendovým světem, vol. 19

EAA 2025
a přístupnost

Jedním z klíčových bodů našich porad byla připravovaná implementace European Accessibility Act (EAA) 2025. Toto nařízení, které má za cíl zlepšit přístupnost digitálních služeb a produktů, klade důraz na dodržování WCAG 2.2 standardů. Tyto standardy určují, jak má být webový obsah přístupný všem uživatelům, včetně těch se zdravotním postižením.

Naše týmy se aktivně připravují na implementaci těchto požadavků a již proběhlo první z plánovaných interních školení, abychom zajistili, že všechny naše projekty budou v souladu s těmito normami.

Nové CSS
jednotky cap unit

Další zajímavou novinkou, kterou jsme probírali, je zavedení cap unit do CSS. Tato jednotka, která je obdobou x-height, je založena na výšce kapitálky písma a může být velmi užitečná při práci s ikonami nebo typografií. Cap unit nabízí nové možnosti pro návrháře a vývojáře, kteří chtějí dosáhnout přesnějšího a konzistentnějšího vzhledu svého obsahu, zejména v případech, kdy je důležité zachovat proporce mezi textem a grafickými prvky.

.div {
	--size: 1cap;
	width: var(--size);
	height: var(--size);
	background-color: var(--color-bg);
}

Přístupné Webové
Komponenty pro Videa

V rámci naší snahy o zlepšení přístupnosti jsme se také zaměřili na možnosti využití nových webových komponent pro vkládání videí z platforem jako YouTube a Vimeo. Tyto nové komponenty by mohly zlepšit přístupnost našeho stávajícího řešení, například tím, že umožňují lepší ovládání přehrávání videa pro uživatele s různými schopnostmi. Součástí této diskuze bylo i zkoumání možností, jak lépe integrovat tyto komponenty do našich stávajících systémů.

Více napsal ve svém článku Adrian Roselli.

Resetování
stylů dialogů

Dalším tématem, které nás zaujalo, byl článek o resetování výchozích stylů pro dialogové okna a jejich pozadí (backdrop). Tento přístup je užitečný pro vývojáře, kteří chtějí mít plnou kontrolu nad vzhledem svých aplikací, zejména pokud jde o konzistenci stylů napříč různými prohlížeči. Resetování výchozích stylů umožňuje vytvořit jednotnější a přizpůsobivější uživatelské rozhraní, které lépe vyhovuje specifickým potřebám projektu.

CSS if()

Prezentovali jsme také nový koncept CSS if(), který je považován za průkopnickou technologii pro podmíněné aplikování stylů. Toto nové API, které je stále v rané fázi vývoje, slibuje větší flexibilitu při návrhu dynamických stylů. Originální článek, který nám byl podnětem, popisuje zavedení nové funkce if() do CSS, která umožňuje vkládat podmínky přímo do stylů. Tato funkce nenahrazuje, ale doplňuje existující stylové dotazy, což umožňuje například dynamické nastavení hodnot na základě vlastních proměnných nebo jiných podmínek. if() je navržen tak, aby zjednodušil práci s komponentami, které potřebují definovat vlastnosti na vyšší úrovni.

Textarea
Autoresize

Funkcionalita textarea autoresize, která automaticky přizpůsobuje velikost textového pole obsahu, byla dalším zajímavým bodem naší diskuze.

field-sizing: content

Tato vlastnost zlepšuje uživatelský zážitek tím, že eliminuje potřebu manuálního nastavování velikosti textových polí.

Starting Style:
definování výchozích stylů

Novinka starting style nabízí způsob, jak definovat výchozí styl pro konkrétní HTML prvky, což může být užitečné při práci s animacemi nebo efekty při načítání stránky. Tento přístup umožňuje nastavit základní vzhled prvků, které se následně mohou měnit podle interakcí uživatele nebo dalších podmínek, což přispívá k hladšímu a atraktivnějšímu uživatelskému zážitku.

[popover]:popover-open {
	opacity: 1;
	transform: scaleX(1);

	@starting-style {
		opacity: 0;
		transform: scaleX(0);
	}
} 

Inputmode pro
optimalizaci vstupu

Představili jsme si také méně známý atribut inputmode, který umožňuje specifikovat typ virtuální klávesnice, která se zobrazí uživateli při interakci s input prvky. Tento atribut je zvláště užitečný pro optimalizaci uživatelského vstupu na mobilních zařízeních, i když je třeba poznamenat, že jeho podpora v prohlížečích, jako je Safari, je omezená. Použití inputmode může výrazně zlepšit uživatelskou zkušenost tím, že zjednodušuje proces zadávání dat.

<input type="text" inputmode="email">

Speculation Rules API:
rychlejší načítání stránek

Další důležitou inovací, kterou jsme probírali, je Speculation Rules API , které umožňuje přednačítání a předrenderování webových stránek. Tato technologie umožňuje, aby se stránky načítaly téměř okamžitě, jakmile na ně uživatel klikne, což může výrazně zlepšit uživatelský zážitek. Toto API je zvláště užitečné pro webové aplikace, které vyžadují rychlý přístup k obsahu.

<script type="speculationrules">
  {
    "prerender": [
      {
        "urls": ["/shop", "/contact"]
      }
    ]
  }
</script>

Zjednodušeně, takto předrenderovaná stránka se načte do paměti a jakmile uživatel na stránku přijde, může ji mít instatně zobrazenou. S tímto nastavením je však potřeba nakládat opatrně. Pokud by vás zajímala detailnější specifikace, navštivte MDN.

Google Maps API:
nové možnosti stylování

Poslední téma se týkalo nových možností v Google Maps API, které zahrnují možnosti stylování a práci s regionálními hranicemi (Data-driven styling for boundaries). Toto API umožňuje vývojářům vytvářet vlastní stylizované mapy s označením různých regionů, což může být užitečné pro aplikace zaměřené na geografická data nebo služby. Nově přidané funkce, jako jsou advanced markers, dovolují přidávat do map komplexní HTML prvky, což rozšiřuje možnosti interakce a vizualizace na mapách.

Závěrem

Naše porady jsou klíčovým nástrojem pro sdílení novinek a technologických poznatků v oblasti frontendového vývoje. Doufám, že vám tyto informace poskytnou inspiraci a přehled o tom, co je v našem oboru aktuální. Rádi své know‑how sdílíme nejen interně, ale i s vámi, našimi čtenáři, abychom společně mohli růst a inovovat. Chcete-li si držet přehled o nejnovějších trendech a technologiích, určitě nás sledujte i nadále. Těšíme se na další setkání.