Letem frontendovým světem, vol. 22

I když samotná animace vlastnosti text-decoration není podporována, animovat můžeme její "část", konkrétně text-decoration-color. Pomocí této vlastnosti dosáhneme efektu plynulého podtržení odkazu. Klíčovým trikem je nastavení text-decoration: underline (ano, i když v ne-hover stavu podtržení nechceme) a text-decoration-color: transparent pro průhlednou barvu podtržení. Při hover efektu pak animujeme změnu barvy podtržení.

a {
	--color-link: #{variables.$color-link};
	--color-hover: #{variables.$color-hover};
	--color-link-decoration: transparent;
	--color-hover-decoration: var(--color-hover);
	color: var(--color-link);
	text-decoration: underline;
	text-decoration-color: var(--color-link-decoration);
	transition: color variables.$t, text-decoration-color variables.$t;
	-webkit-tap-highlight-color: transparent;
	.hoverevents &:hover {
		color: var(--color-hover);
		text-decoration-color: var(--color-hover-decoration);
	}
}

Nedostatečný kontrast barev je jedním z nejčastějších problémů spojených s přístupností webových stránek. Ale věděli jste, že Chrome DevTools vám může pomoci tento problém nejen najít, ale i opravit? Jak na to?

Když otevřete Chrome DevTools a prozkoumáte konkrétní prvek, zobrazí se vám panel s jeho detaily. Jak je vidět na obrázku, může se vedle kategorie "Contrast" objevit buď zelená nebo oranžová výstražná ikona - ta značí, že kontrast mezi textem a pozadím daného prvku není dostatečný.

V záložce "Styles" můžete udělat ještě více. Pokud kliknete na čtvereček s barvou vedle hodnoty vlastnosti color, otevře se nástroj pro výběr barvy. Pod vstupním polem pro hodnotu barvy uvidíte sekci s informací o kontrastu. Červená ikona upozorňuje na problém a tlačítko s ikonou obnovení umožní Chrome automaticky navrhnout novou barvu, která bude mít správný kontrast a bude co nejblíže původní.

Pamatujete si na původní stylování Google Maps pomocí JSON konfigurace s barvami, která se vkládala přímo do projektu? Tomu již odzvonilo. Částečně. Nyní se stylování Google Maps dělá pomocí Map Styles v Google Cloud. Zde si vytvoříte tzv. map ID, kterému přiřadíte styl mapy. Ten lze buď ručně nakonfigurovat, nebo vložit původní JSON konfiguraci. Více o stylování map se dočtete v  dokumentaci Externí odkaz .

Animování přechodů (gradientů) v CSS bylo dlouhou dobu výzvou. Standardní CSS vlastnost background-image, kde jsou gradienty definovány, totiž nepodporuje plynulé přechody pomocí transition. Jakýkoli pokus o animaci přímo v linear-gradient() nebo radial-gradient() vedl k okamžitému skokovému přechodu mezi stavy.

Díky podpoře pravidla @property je však možné registrovat vlastní CSS proměnné (custom properties), které prohlížeč považuje za určité datové typy (např. <color>, <length>, <percentage>). Nejdůležitější pro nás je, že takto definované proměnné s definovaným typem se stávají interpolovatelnými, což znamená, že prohlížeč ví, jak plynule přecházet mezi jejich hodnotami – jinými slovy, můžeme na ně aplikovat CSS transition!

See the Pen Animated gradients with @property by Kelly Plitz (@kellyplitz) on CodePen.