:focus-visible
Pasuje do elementu z fokusem wtedy, gdy przeglądarka uzna, że wskaźnik powinien być widoczny, np. przy nawigacji klawiaturą.
Przykład
#.btn:focus-visible {
outline: 3px solid #f59e0b;
outline-offset: 3px;
}<p style="margin: 0 0 10px; color: #a1a1aa;">Kliknij przycisk myszą, a potem naciśnij Tab.</p>
<div style="display: flex; gap: 8px;">
<button class="btn" type="button" style="padding: 8px 16px; border: 0; border-radius: 8px; background: #7c3aed; color: #fff; font: inherit;">Zapisz</button>
<button class="btn" type="button" style="padding: 8px 16px; border: 0; border-radius: 8px; background: #3f3f46; color: #fff; font: inherit;">Anuluj</button>
</div>Definicja i zastosowanie
#Pseudoklasa :focus-visible to mądrzejsza wersja :focus. Przeglądarka sama ocenia, czy użytkownikowi przyda się widoczny wskaźnik. Przy przechodzeniu klawiszem Tab pasuje zawsze, a po kliknięciu przycisku myszą zwykle nie, bo wtedy wiadomo, gdzie jest fokus.
Pola tekstowe to wyjątek: po kliknięciu myszą pasują zarówno do :focus, jak i do :focus-visible, bo użytkownik zaraz będzie pisał na klawiaturze i musi widzieć, które pole jest aktywne.
Dzięki temu nie trzeba wybierać między wyglądem a dostępnością. Własny, wyraźny styl fokusu nadajesz w :focus-visible, a osoby klikające myszą nie widzą obwódki na każdym klikniętym przycisku. Domyślna obwódka nowoczesnych przeglądarek też opiera się na tej pseudoklasie.
Składnia
#selektor:focus-visible { właściwość: wartość; }Typowe zastosowania
#- Kliknij przycisk myszą: obwódki nie ma. Teraz naciśnij Tab: pojawia się, bo nawigujesz klawiaturą.
- Dla porównania zwykłe
:focus: w większości przeglądarek obwódka pojawia się także po kliknięciu myszą. - Pole tekstowe pasuje także po kliknięciu myszą, bo zaraz będziesz w nim pisać na klawiaturze.
Typowe zastosowania w praktyce
#input:focus-visible
input:focus-visible {
outline: 3px solid #a78bfa;
outline-offset: 2px;
}Obsługa przeglądarek
#Szeroko dostępne
Działa we wszystkich nowoczesnych przeglądarkach, także na telefonach. Możesz używać bez obaw.
- Chrome
- Edge
- Firefox
- Safari
Dobre praktyki
#- Nie pisz
:focus { outline: none }. Przeglądarki i tak pokazują domyślną obwódkę tylko przy:focus-visible, a jej usunięcie odbiera orientację osobom korzystającym z klawiatury. - Efekty najechania łącz z fokusem klawiatury:
.link:hover, .link:focus-visible { … }. - Dobieraj styl fokusu tak, by był widoczny na każdym tle. Gruba obwódka z
outline-offsetsprawdza się lepiej niż subtelna zmiana koloru.
Powiązane hasła
#- :focusPasuje do elementu, który ma fokus, czyli przyjmuje teraz dane z klawiatury, np. do klikniętego pola formularza.
- :focus-withinPasuje do elementu, który sam ma fokus albo zawiera element z fokusem. Pozwala wyróżnić cały formularz lub kartę.
- :hoverPasuje do elementu, nad którym znajduje się kursor myszy. Podstawa efektów najechania na przyciski, linki i karty.
- :activePasuje do elementu w chwili aktywacji, najczęściej gdy przycisk myszy jest wciśnięty nad przyciskiem lub linkiem.
- outlineRysuje obwódkę wokół elementu, która nie zajmuje miejsca w układzie.
Widzisz błąd albo brakuje przykładu? Napisz do nas.