Focus w CSS

Rzadko kiedy słyszę, żeby ktoś lubił pisać CSS. Zazwyczaj kojarzy się on z przykrą koniecznością. Po części rozumiem, z czego to wynika. CSS posiada mnóstwo reguł i zasad, bez poznania których często będziemy chodzić po omacku. Wiesz, na ile sposobów można stylować focus w CSS? Mamy :focus, :focus-visible, :focus-within… Do tego dochodzi np. :active, który często jest mylony z :focus. Nie wiem, czy odczaruję dla Ciebie CSS, ale przynajmniej poznasz bliżej kilka użytecznych selektorów.

Na ten moment skupmy się narazie na :focus i :focus-visible. Poniżej masz dwa przyciski. Do ostylowania pierwszego wykorzystałem :focus a w drugim :focus-visible.

/* Przycisk po lewej */
button:focus {
	border: 1px solid red;
}

/* Przycisk po prawej */
button:focus-visible {
	border: 1px solid red;
}

Kiedy naciśniesz pierwszy, obramowanie podświetli się na czerwono i zostanie tak, dopóki nie zmieni się focus. A co się stanie po naciśnięciu drugiego? Absolutnie nic. Cała magia zadzieje się kiedy spróbujesz przejść przez oba przyciski za pomocą klawisza Tab. Dopiero wtedy obramowanie drugiego przycisku podświetli się na czerwono. Dzieje się tak, ponieważ style dla :focus-visible są aplikowane tylko wtedy, kiedy przeglądarka uzna, że jest to konieczne. Zazwyczaj nie chcemy, żeby przycisk został podświetlony, kiedy już na niego kliknęliśmy. Dlatego śmiało można stwierdzić, że domyślnie powinniśmy sięgać po :focus-visible, a nie :focus.

A jak ma się do tego selektor :active? Zobaczmy.

focus + active

button:focus {
	border: 1px solid red;
}

button:active {
	background-color: rgb(253, 230, 231);
}

Widzisz różnicę? Selektor :active (jak sama nazwa wskazuje) będzie aktywny tylko wtedy, kiedy naciskamy przycisk. W zdecydowanej większości przypadków lepszą opcją będzie skorzystanie z :active, jeżeli zależy Ci na ostylowaniu przycisku w momencie wciskania.

W tym momencie pozostaje nam skupić się na :focus-within. Załóżmy, że tworzysz formularz i chcesz, żeby po naciśnięciu na pole tekstowe podświetliła się etykieta. Rozwiązanie? Bardzo proste.

Adres e-mail

	<style>
		label:focus-within {
			font-weight: 700;
		}
	</style>

	<label>
		Adres e-mail
		<input />
	</label>

Oczywiście w tym wypadku moglibyśmy rozwiązać to przy pomocy innej struktury i innych selektorów, ale nie zawsze mamy taką opcję. W zanadrzu mamy jeszcze jeden selektor, który mniej więcej od 2023 roku jest wspierany przez większość przeglądarek. Mowa tutaj o :has. Zobaczmy, w jaki sposób moglibyśmy z niego skorzystać.

Adres e-mail

	<style>
		label:has(input:focus-visible) {
			font-weight: 700;
		}
	</style>

	<label>
		Adres e-mail
		<input />
	</label>

Dużo się nie zmieniło, prawda? Zwróć uwagę, że semantyka w przypadku :has i :focus-within jest dokładnie taka sama. Najważniejsza różnica to to, że :has to selektor-rodzic. To tak jakbyś powiedział - zmień etykietę, jeżeli pole tekstowe ma aktywny focus. W każdym razie :has to temat na osobny wpis. Zdecydowanie warto się z nim zapoznać i pamiętać o nim, bo pozwala zmienić podejście do CSS o 180 stopni.

I pamiętaj…

Miłego kodowania!

*Nie no, serio tak myślę!