Реальный пиарСоздание сайтовВёрстка → Всегда используйте :hover вместе с :focus

Всегда используйте :hover вместе с :focus

focus 3

Мне очень понравилась Пашина статья о псевдоклассах. =) Специально по такому случаю в закромах была недавняя заметка с 456bereastreet.

Качественная разработка сайта любой сложности.
Компания 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.
Небольшое лирическое

Если кто-то думает: «Э... а как же модульные сетки, все дела, Марк Болтон и все такое». Сетки — будут позже. Болтон... при всем к нему уважении, такое огромное количество воды мне попросту надоело переводить. Будет время, переведу. Прошу прощения за то, что не довел до конца. Но там уже какая-то художественная литература, так что сюда ее выкладывать нет никакого смысла. В ближайшем рассмотрении весь этот цикл был всего лишь рекламой его книги с одноименным названием. К сожалению, это западный мир. Бесплатно дают только стакан воды.


Источник: http://vremenno.net

Рекомендуем



Оптимизация CSS для ускорения обработки браузерами Сегодня хочу поговорить о том, как браузеры обрабатывают правила CSS и как писать эти самые правила так, чтобы страница рендерилась быстрее


Псевдоклассы в CSS Итак, как я уже сказал, веб-разработчики используют псевдоклассы в основном для задания стилей ссылок, например :link для непосещенной ссылки, :hover для ссылки при наведении, :active для нажатой и удерживаемой ссылки и :visited для посещенной


Кросс-браузерный @font-face Заходим, загружаем шрифт, получаем архив с примером использования и необходимыми типами файлов