Не игнорируйте «:focus»

Не игнорируйте «:focus»

Фокусировка

Здравствуйте, уважаемые читатели!

Зачастую при написании CSS-файла для нового веб-проекта используются псевдокласс «:hover», который отвечает за состояние объекта, когда на него наведена мышь. Здесь нередко возникает ошибка из-за небрежности в написании правил для :hover без выполнения псевдокласса «:focus», который устанавливает фокус на объекте страницы. Насколько глубокими будут проблемы от подобного недосмотра зависит от назначенных действий для :hover.

Игнорирование :focus не вызовет серьезных трудностей, если для :hover определены простые правила: вроде изменения цвета при наведении мышки на объект. Если фокус поменяется посредством клавиатуры, актуальный объект попросту не выделится.

А вот если вы зададите для :hover правило «outline=0» или «outline=none», то проблемы будут куда более серьезными. И особенно злободневной проблемой это становится в свете нынешней тенденции сводить действие «outline» на нет. Таким образом, получается, что ссылки технически доступны, но визуально это не проявляется (лишь некоторые браузеры в строке статуса отражают значение «href» ссылки под фокусом).

Однако, к большому счастью разработчиков, подобные проблемы решаются весьма легко. Необходимо всего-навсего при определении правил для :hover не забыть указать и :focus.

Дискуссия по теме