: фокус-видим - CSS-трикове

В :focus-visibleпсевдо-класа (известен също като "Фокус-Посочени" псевдо-класа) е роден CSS начин да стилови елементи, че:

На фокус са
Нуждаете се от видим индикатор, за да покажете фокус (повече за това по-късно)

:focus-visibleсе използва подобно на :focus: за насочване на вниманието към елемента, който в момента е фокусиран.

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

:focus-visibleе част от работния проект на CSS4 селектори. Преди приемането, Mozilla представи :-moz-focusringпсевдокласа, за да предостави функционалността на Firefox преди официална спецификация.

Защо ни трябва: фокус видим?

Не :focusправи ли това вече? Да, но има проблеми. Най-ясната илюстрация е бутон, който задейства някои JavaScript. Представете си въртележка за изображения с бутони за превключване между изображения. Да предположим, че сте добавили tabindexбутон a, за да могат да бъдат избрани с клавиатура, но когато отидете да тествате въртележката с мишката, виждате този контур около великолепния си бутон:

Не че бихте искали да направите това (за опасения относно достъпността), но как да се отървете от него? Чрез задаване на :focusпсевдокласа:

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

Сега вашият бутон изглежда страхотно, когато е на фокус, но какво се случва, когато потребител се раздели на вашия бутон без мишка, а вместо това клавиатура? Те не могат да видят къде са раздели! Това е проблем, защото сега няма начин да разберете кой бутон е фокусиран за действия на клавиатурата:

Един от тях е фокусиран, но не можете да го видите!

Има ли начин да премахнете контура на синия фокус, но все пак да покажете фокус, който е по-съобразен с дизайна на сайта? Разбира се, можете да вземете вашата торта и да я изядете също, благодарение на :focus-visible!

:focus-visibleсе прилага само когато всъщност искате визуален индикатор, който да помогне на потребителя да види къде е фокусът. С други думи, не може да скрие очертанията, както :focusможе. (Е, би могло да се смеси в дизайна, но каквото и да е.) Двамата трябва да се използват заедно в този смисъл. Нека добавим един към нашия бутон:

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

Сега, когато клавиатурата се използва за разделяне на бутона, ще има визуална индикация на фокуса:

Как браузърите определят кога нещо е: фокусно видимо?

Браузърите имат малко свобода да определят кога този псевдоселектор трябва да се приложи към даден елемент, използвайки собствената им евристика. Първо, нека разгледаме работния проект на CSS4 и след това ще се опитаме да го разделим. От спецификациите:

Ако потребителят е изразил предпочитание (например чрез системно предпочитание или настройка на браузъра) винаги да вижда видим индикатор за фокус, потребителският агент трябва да уважи това, като: фокусът-видим винаги съвпада с активния елемент, независимо от който и да е друг фактори. (Друга опция може да бъде потребителският агент да показва свой собствен индикатор за фокус, независимо от стиловете на автора.)

Всеки елемент, който поддържа въвеждане от клавиатурата (като въвеждащ елемент или друг елемент, който може да задейства виртуална клавиатура да бъде показана на фокус, ако не присъства физическа клавиатура), трябва винаги да съвпада: focus-visible, когато е фокусиран

Ако потребителят взаимодейства със страницата чрез клавиатурата, фокусираният в момента елемент трябва да съвпада: focus-visible (т.е. използването на клавиатурата може да промени дали този псевдо-клас съвпада, дори ако това не засяга: focus).

Ако потребителят взаимодейства със страницата чрез посочващо устройство, така че фокусът се премества към нов елемент, който не поддържа въвеждане от потребителя, новофокусираният елемент не трябва да съвпада: focus-visible.

Ако активният елемент съвпада: focus-visible и скриптът кара фокусът да се премести другаде, то наскоро фокусираният елемент трябва да съвпада: focus-visible.

И обратно, ако активният елемент не съвпада: focus-visible и скриптът кара фокусът да се премести другаде, то наскоро фокусираният елемент не трябва да съвпада: focus-visible.

Ако това е малко абстрактно, ето интерпретация:

Ситуация	Прилага ли се: фокус видим?
Потребителят казва, че винаги иска фокусът да бъде видим чрез настройка	Да
Елементът се нуждае от клавиатура, за да функционира (като текст)	Да
Потребителят навигира с клавиатура	Да
Потребителят навигира с посочващо устройство (като мишка или пръст на сензорен екран)	Не
Скриптът кара фокусът да се премести от `:focus-visible`елемент към друг елемент	Да
Скриптът кара фокусът да се премести от неелемент `:focus-visible`към друг елемент	Не

Това повтаря: Това са насоки и браузърите ще могат сами да определят какво е избрано от :focus-visible. Можем да очакваме, че очевидният случай на навигация на клавиатурата ще бъде обработен по предсказуем начин, но браузърите имат способността сами да определят, както всяка друга функция.

Поддръжка на браузър

Тези данни за поддръжка на браузъра са от Caniuse, който има повече подробности. Число показва, че браузърът поддържа функцията на тази версия и по-нова.