Постоянно используйте :hover совместно с :focus



Постоянно используйте :hover совместно с :focus

Данную статью "постоянно используйте :hover совместно с :focus" я составил на основе знаний о псевдоклассах западных блоггеров. Коротко поведаю про то, что может стать причиной игнорирование псевдо-класса :focus.
Мы рассмотрим разновидности проблем и в результате узнаем что делать, дабы не допустить ошибок верстке сайтов.

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

Осмотрим их в порядке возрастания серьезности.

Первое. Неряшливость

Когда для :hover установлены обычные правила, к примеру, исключительно перемена цвета слова, пренебрежение :focus не влечет за собой трудноразрешимых задач. В такой ситуации при смене фокуса при помощи клавиатуры важный элемент просто никак не выделится.

Второе. Серьезные проблемы применения

Во много раз больше трудностей вы получите, если установите свойство outline одинаковым 0 или же значению none. Данная неувязка сейчас набирает актуальность, так как сведение на нет результата outline очень востребовано.

В такой ситуации гиперссылки технически доступны, хотя это никак не доказано визуально. Всего лишь некоторые браузеры показывают в статусной строчке текущее значение href сфокусированной гиперссылки.

Третье. Абсолютная недосягаемость

Присутствуют методики, которые делают содержимое абсолютно неприступным для пользователей приборов в отсутствии поддержки мыши. Например, когда :hover употребляется для раскрытия навигационного меню, и при всем этом, не определена реакция на псевдокласс :focus. В такой ситуации меню станет попросту недоступно, раз у вас нет мышки, а только клавиатура под рукой.

Фокус на :focus и :active

Все, без исключения, перечисленные трудности находят решение достаточно быстро и просто: там же, где вы определяете правила для класса :hover, укажите так же :focus. Чтобы IE7 и ранних версий распознали правила, надобно нам, дописать простой псевдокласс :active.

Несколько грамотных замечаний о порядке перечисления псевдоклассов объявлении.

Данный параграф - отдельная статья. Почти всем известно, что порядок объявления правил псевдоклассов CSS стилей, имеет значение. На западе любят последующий порядок псевдоклассов в верстке сайта:

:link, :visited, :hover, :focus, :active

Данный порядок базируется на нескольких заметках Эрика Мейера. На сегодня все, читайте блог о HTML верстке и веб-дизайне, автор данной статьи, а так же многих статей на ресурсе buyhtml.ru - Iancovski Александр Васильевич.