Псевдокласс :focus-visible: заметный фокус
Как выделять активный элемент для пользователя клавиатуры и не убирать стандартную обводку без замены.
Как это работает
:focus-visible применяется, когда браузер считает, что фокус нужно показать визуально. Часто это происходит при переходе клавишей Tab, но поведение зависит от элемента и способа взаимодействия. Псевдокласс позволяет оформить фокус без собственного отслеживания клавиатуры.
Сделайте контур хорошо различимым на фоне кнопки и окружающей поверхности. Outline не занимает место в раскладке, а outline-offset отделяет его от края. Проверьте, что родитель с overflow не обрезает обводку.
Пример в интерфейсе
a { display: inline-block; padding: 12px 18px; background: #eaf4ee; color: #11694e; }
a:focus-visible { outline: 3px solid #b87912; outline-offset: 4px; }Значения и поведение
| Значение или правило | Результат |
|---|---|
| :focus-visible | Фокус с учётом браузерных эвристик. |
| outline | Обводка без изменения размеров. |
| outline-offset | Расстояние от края до обводки. |
| :focus | Любой фокус независимо от способа его появления. |
На что обратить внимание
Правило outline: none без равноценной замены лишает пользователя клавиатуры информации о текущем положении на странице.
Проверьте на практике
Перейдите к ссылке клавишей Tab, затем нажмите Enter. Сравните фокус с наведением мыши и проверьте видимость на светлом и тёмном фоне.
Попробуйте сами
РЕЗУЛЬТАТ · ИЗОЛИРОВАННЫЙ ПРЕДПРОСМОТР
Измените код и нажмите «Запустить». JavaScript и внешние запросы отключены.
Самостоятельный учебный материал. Техническая документация: первоисточник по теме ↗. Если результат отличается, проверьте код и версию браузера.