: ostrość widoczna - CSS-Tricks

:focus-visiblePseudo-klasa (znany również jako „Focus-wskazanej” pseudo-klasa) jest rodowitym CSS sposób elementy stylu, który:

Są w centrum uwagi
Potrzebujesz widocznego wskaźnika, aby pokazać fokus (więcej na ten temat później)

:focus-visiblejest używany podobnie do :focus: aby zwrócić uwagę na element, który jest aktualnie aktywny.

.element:focus-visible ( background-color: pink; /* Something to get the user's attention */ )

:focus-visiblejest częścią roboczej wersji roboczej selektorów CSS4. Przed przyjęciem Mozilla wprowadziła :-moz-focusringpseudoklasę, aby zapewnić funkcjonalność Firefoksowi przed formalną specyfikacją.

Dlaczego potrzebujemy: ostrość widoczna?

Czy :focusjuż tego nie robi? Tak, ale są problemy. Najbardziej przejrzystą ilustracją jest przycisk uruchamiający JavaScript. Wyobraź sobie karuzelę obrazów z przyciskami do przełączania się między obrazami. Załóżmy, że dodałeś tabindexdo przycisków, aby można je było wybierać za pomocą klawiatury, ale kiedy idziesz przetestować karuzelę za pomocą myszy, zobaczysz ten kontur wokół swojego wspaniałego przycisku:

Kontur dodany przez przeglądarkę w dniu `:focus`

Nie żebyś chciał to zrobić (ze względu na dostępność), ale jak się tego pozbyć? Ustawiając :focuspseudoklasę:

.next-image-button:focus ( outline: none; )

Teraz twój przycisk wygląda świetnie, gdy jest aktywny, ale co się stanie, gdy użytkownik przejdzie do przycisku bez myszy, ale zamiast klawiatury? Nie widzą, gdzie się założyli! To jest problem, ponieważ teraz nie ma sposobu, aby stwierdzić, który przycisk jest przeznaczony do działań na klawiaturze:

Jeden z nich jest skupiony, ale nie możesz go zobaczyć!

Czy istnieje sposób na usunięcie niebieskiego konturu fokusa, ale nadal pokazuje on fokus, który jest bardziej zgodny z projektem witryny? Jasne, możesz mieć swoje ciasto i też je zjeść, dzięki :focus-visible!

:focus-visiblema zastosowanie tylko wtedy, gdy faktycznie chcesz, aby wskaźnik wizualny pomagał użytkownikowi zobaczyć, gdzie jest fokus. Innymi słowy, nie może ukryć konturu, jak :focusmoże. (Cóż, można by to połączyć z projektem, ale nieważne). W tym sensie oba muszą być używane razem. Dodajmy jeden do naszego przycisku:

.next-image-button:focus ( outline: none; ) .next-image-button:focus-visible ( outline: 3px solid blanchedalmond; /* That'll show 'em */ )

Teraz, gdy klawiatura jest używana do przechodzenia do przycisku, pojawi się wizualne wskazanie fokusa:

`:focus-visible` sprawia, że ostrość jest widoczna!

W jaki sposób przeglądarki określają, czy coś jest: widoczne?

Przeglądarki mają trochę swobody, aby określić, kiedy ten pseudo-selektor powinien zostać zastosowany do danego elementu, używając ich własnej heurystyki. Najpierw spójrzmy na roboczą wersję roboczą CSS4, a następnie spróbujemy go rozbić. Ze specyfikacji:

Jeśli użytkownik wyraził preferencję (na przykład poprzez preferencje systemowe lub ustawienia przeglądarki), aby zawsze widzieć widoczny wskaźnik fokusa, klient użytkownika powinien to uszanować, mając: fokus-widoczny zawsze pasuje do aktywnego elementu, niezależnie od innych czynniki. (Inną opcją może być pokazanie przez klienta użytkownika własnego wskaźnika aktywności niezależnie od stylu autora).

Każdy element, który obsługuje dane wejściowe z klawiatury (taki jak element wejściowy lub jakikolwiek inny element, który może powodować wyświetlenie wirtualnej klawiatury na fokusie, jeśli fizyczna klawiatura nie jest obecna) powinien zawsze pasować: fokus jest widoczny, gdy jest aktywny.

Jeśli użytkownik wchodzi w interakcję ze stroną za pomocą klawiatury, aktualnie zaznaczony element powinien pasować: fokus-widoczny (tj. Użycie klawiatury może zmienić, czy ta pseudoklasa pasuje, nawet jeśli nie wpływa na: fokus).

Jeśli użytkownik wchodzi w interakcję ze stroną za pośrednictwem urządzenia wskazującego, tak że fokus jest przenoszony do nowego elementu, który nie obsługuje danych wejściowych użytkownika, nowy element nie powinien pasować: fokus-widoczny.

Jeśli aktywny element pasuje: fokus-widoczny, a skrypt powoduje, że fokus przenosi się w inne miejsce, nowo wyostrzony element powinien pasować: fokus-widoczny.

I odwrotnie, jeśli aktywny element nie pasuje: fokus-widoczny, a skrypt powoduje, że fokus przesuwa się w inne miejsce, nowo wyostrzony element nie powinien pasować: fokus-widoczny.

Jeśli to trochę abstrakcyjne, oto interpretacja:

Sytuacja	Czy: ma zastosowanie widoczne skupienie?
Użytkownik twierdzi, że zawsze chce, aby fokus był widoczny za pośrednictwem ustawienia	tak
Element potrzebuje do działania klawiatury (np. Tekstu)	tak
Użytkownik nawiguje za pomocą klawiatury	tak
Użytkownik nawiguje za pomocą urządzenia wskazującego (takiego jak mysz lub palec na ekranie dotykowym)	Nie
Skrypt powoduje, że fokus przenosi się z `:focus-visible`elementu do innego elementu	tak
Skrypt powoduje, że fokus przenosi się z `:focus-visible`elementu niebędącego elementem do innego elementu	Nie

Warto powtórzyć: to są wskazówki, a przeglądarki będą mogły samodzielnie decydować o tym, co jest wybierane :focus-visible. Możemy spodziewać się, że oczywisty przypadek nawigacji za pomocą klawiatury będzie obsługiwany w przewidywalny sposób, ale przeglądarki mają możliwość samodzielnego określenia, jak każda inna funkcja.

Wsparcie przeglądarki

Te dane dotyczące obsługi przeglądarek pochodzą od Caniuse, który zawiera więcej szczegółów. Liczba wskazuje, że przeglądarka obsługuje tę funkcję w tej wersji i nowszych.