: фокус-видимый - CSS-хитрости

:focus-visibleПсевдо-класс (также известный как «Focus-Indicated» псевдо-класс) является родным CSS путем к элементам стиля , что:

В фокусе
Нужен видимый индикатор, чтобы показать фокус (подробнее об этом позже)

:focus-visibleиспользуется аналогично :focus: для привлечения внимания к элементу, который в данный момент находится в фокусе.

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

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

Зачем нужны: фокус-видимый?

Еще этого не :focusделает? Да, но есть проблемы. Самая яркая иллюстрация - это кнопка, запускающая некоторый JavaScript. Представьте себе карусель изображений с кнопками для переключения между изображениями. Допустим, вы добавили tabindexк кнопкам, чтобы их можно было выбирать с помощью клавиатуры, но когда вы идете тестировать карусель с помощью мыши, вы видите этот контур вокруг своей великолепной кнопки:

Не то чтобы вы захотели это сделать (из соображений доступности), но как от этого избавиться? Установив :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-visible (т. Е. Использование клавиатуры может изменить соответствие этого псевдокласса, даже если оно не влияет на: focus).

Если пользователь взаимодействует со страницей через указывающее устройство, так что фокус перемещается на новый элемент, который не поддерживает ввод данных пользователем, элемент с новым фокусом не должен совпадать: focus-visible.

Если активный элемент соответствует: focus-visible, и сценарий заставляет фокус перемещаться в другое место, новый элемент в фокусе должен соответствовать: focus-visible.

И наоборот, если активный элемент не соответствует: focus-visible, и сценарий заставляет фокус перемещаться в другое место, новый элемент с фокусом не должен соответствовать: focus-visible.

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

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

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

Поддержка браузера

Эти данные о поддержке браузером взяты из Caniuse, где есть более подробная информация. Число означает, что браузер поддерживает эту функцию в этой версии и выше.