:focus vs :focus-visible
focus pasuje do każdego elementu z fokusem, także po kliknięciu myszą. focus-visible pokazuje wskaźnik tylko tam, gdzie przeglądarka uzna go za potrzebny.
Porównanie w tabeli
#Pasuje po kliknięciu myszą
- :focus
- Tak, w większości przeglądarek, nawet na przyciskach
- :focus-visible
- Zwykle nie, poza polami tekstowymi
Pasuje po nawigacji Tab
- :focus
- Tak
Kto decyduje, czy pokazać wskaźnik
- :focus
- Zawsze pasuje, gdy element ma fokus
- :focus-visible
- Przeglądarka ocenia, czy wskaźnik jest potrzebny
Pole tekstowe po kliknięciu myszą
- :focus
- Pasuje
- :focus-visible
- Też pasuje, bo zaraz zaczniesz pisać
Wsparcie przeglądarek
- :focus
- Od dawna,
widely - :focus-visible
- Nowsza, ale też
widely
Rekomendacja do stylu fokusu
- :focus
- Tylko gdy chcesz reagować na fokus niezależnie od urządzenia
- :focus-visible
- Tak, to współczesny standard widocznego fokusu
Przykład
#button:focus-visible {
outline: 3px solid #f59e0b;
outline-offset: 3px;
}<div class="stage" style="display: flex; gap: 10px;">
<button type="button" style="padding: 8px 16px; border: 0; border-radius: 8px; background: #3f3f46; color: #fff;">Kliknij myszą</button>
</div>Kliknij przycisk myszą: obwódki nie będzie. Teraz naciśnij Tab: pojawi się, bo nawigujesz klawiaturą.
Definicja i zastosowanie
#Pseudoklasa :focus pasuje do elementu z fokusem niezależnie od tego, jak go dostał: po kliknięciu myszą, stuknięciu na telefonie czy po przejściu klawiszem Tab. W większości przeglądarek kliknięcie przycisku też daje mu fokus, dlatego obwódka pojawiająca się po zwykłym kliknięciu bywa zaskakująca.
:focus-visible jest mądrzejsza. Przeglądarka sama ocenia, czy wskaźnik fokusu jest w danej chwili potrzebny. Po nawigacji klawiszem Tab pasuje zawsze, a po kliknięciu myszą na przycisku czy linku zwykle nie, bo użytkownik widzi, co kliknął. Pola tekstowe są wyjątkiem: pasują do obu, bo po kliknięciu i tak zaraz zaczniesz w nich pisać.
W praktyce styl fokusu warto pisać w :focus-visible, a nie w :focus. Dzięki temu osoby klikające myszą nie widzą obwódki na każdym kliknięciu, a osoby nawigujące klawiaturą wciąż dostają wyraźny wskaźnik. Nigdy nie usuwaj obwódki przez :focus { outline: none } bez takiego zamiennika.
Składnia
#selektor:focus { właściwość: wartość; }
selektor:focus-visible { właściwość: wartość; }Więcej przykładów
#button:focus {
outline: 3px solid #f59e0b;
outline-offset: 3px;
}<div class="stage" style="display: flex; gap: 10px;">
<button type="button" style="padding: 8px 16px; border: 0; border-radius: 8px; background: #3f3f46; color: #fff;">Kliknij myszą</button>
</div>Dla porównania: zwykłe :focus w większości przeglądarek pokazuje obwódkę także po kliknięciu myszą.
input:focus-visible {
outline: 3px solid #a78bfa;
}<div class="stage"><input placeholder="Kliknij myszą" style="padding: 8px 10px; border: 1px solid #52525b; border-radius: 8px; background: #18181b; color: inherit;"></div>Pole tekstowe pasuje do :focus-visible nawet po kliknięciu myszą, bo zaraz będziesz w nim pisać.
Dobre praktyki
#- Nigdy nie pisz
:focus { outline: none }bez zamiennika w:focus-visible, bo odbierasz orientację osobom nawigującym klawiaturą. - Styluj wskaźnik fokusu w
:focus-visible, żeby nie pojawiał się na każdym kliknięciu myszą. - Efekty najechania łącz z fokusem klawiatury:
.btn:hover, .btn:focus-visible { ... }.
Powiązane hasła
#- :focusPasuje do elementu, który ma fokus, czyli przyjmuje teraz dane z klawiatury, np. do klikniętego pola formularza.
- :focus-visiblePasuje do elementu z fokusem wtedy, gdy przeglądarka uzna, że wskaźnik powinien być widoczny, np. przy nawigacji klawiaturą.
- :hoverPasuje do elementu, nad którym znajduje się kursor myszy. Podstawa efektów najechania na przyciski, linki i karty.
- outlineRysuje obwódkę wokół elementu, która nie zajmuje miejsca w układzie.
- :activePasuje do elementu w chwili aktywacji, najczęściej gdy przycisk myszy jest wciśnięty nad przyciskiem lub linkiem.
Widzisz błąd albo brakuje przykładu? Napisz do nas.