Всегда используйте :hover вместе с :focus
Мы рассмотрим типы проблем и в итоге узнаем что делать, чтобы избежать их.
Качественная разработка сайта любой сложности.
Компания ltd-studio.
Реализация правил для псевдокласса :hover без реализации :focus является наиболее частым недосмотром при проектировании стиля сайта. Серьезность проблем при таком недосмотре зависит от того, как вы определили поведение для состояния :hover.
Рассмотрим их в порядке возрастания серьезности.
1. Неряшливость
Если для :hover заданы простые правила, например, только изменение цвета текста, пренебрежение :focus не влечет за собой серьезных проблем. В этом случае при смене фокуса с помощью клавиатуры актуальный элемент просто никак не выделится.
2. Серьезные проблемы использования
Гораздо больше проблем вы получите, если зададите свойство outline равным 0 или значению none. Эта проблема сейчас набирает актуальность, т.к. сведение на нет эффекта outline довольно популярно.
В этом случае ссылки технически доступны, но это никак не подтверждено визуально. Разве что некоторые браузеры отображают в статусной строке текущее значение href сфокусированной ссылки.
3. Полная недосягаемость
Существуют методики, которые делают содержимое совершенно недоступным для пользователей устройств без поддержки мыши. В частности, когда :hover используется для раскрытия меню, и при этом не определена реакция на :focus. В этом случае меню будет недоступно, если у вас нет мышки. Epicfail.
Фокус на :focus (и :active)
Все перечисленные проблемы решаются довольно просто: там же, где вы определяете правила для :hover, укажите и :focus. Для того, чтобы Internet Explorer версий 7 и ранее распознал правила, надо дописать псевдокласс :active.
Пара слов о порядке перечисления псевдоклассов объявлении
Этот параграф — отдельная заметка. Все желающие могут ознакомиться с оригиналом статьи.
Для многих известно, что порядок объявления псевдоклассов правиле CSS имеет значение. На 456bereastreet предпочитают следующий порядок:
:link, :visited, :hover, :focus, :activeЭтот порядок основан на нескольких статьях Эрика Мейера. Одна из них содержит довольно забавные мнемоники, я привожу их ниже на языке оригинала:
- LoVe’s Hurts Fade Away;
- Luther Vandross Hits Fabulous Arpeggios;
- Lord Vader Hates Furry Animals;
- Lusty Vampires Hunger For Absinthe;
- Lord Voldemort Has Foul Ambitions.
Небольшое лирическое
Если кто-то думает: «Э... а как же модульные сетки, все дела, Марк Болтон и все такое». Сетки — будут позже. Болтон... при всем к нему уважении, такое огромное количество воды мне попросту надоело переводить. Будет время, переведу. Прошу прощения за то, что не довел до конца. Но там уже какая-то художественная литература, так что сюда ее выкладывать нет никакого смысла. В ближайшем рассмотрении весь этот цикл был всего лишь рекламой его книги с одноименным названием. К сожалению, это западный мир. Бесплатно дают только стакан воды.
Рекомендуем почитать
