Постоянно используйте :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 Александр Васильевич.