22 декабря 2015
16 апреля 2010
25
Всегда используйте :hover вместе с :focus
Мне очень понравилась Пашина статья о псевдоклассах. =) Специально по такому случаю в закромах была недавняя заметка с 456bereastreet.
В ней рассказывается о том, что может повлечь за собой игнорирование псевдокласса :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.
Небольшое лирическое
Если кто-то думает: «Э... а как же модульные сетки, все дела, Марк Болтон и все такое». Сетки — будут позже. Болтон... при всем к нему уважении, такое огромное количество воды мне попросту надоело переводить. Будет время, переведу. Прошу прощения за то, что не довел до конца. Но там уже какая-то художественная литература, так что сюда ее выкладывать нет никакого смысла. В ближайшем рассмотрении весь этот цикл был всего лишь рекламой его книги с одноименным названием. К сожалению, это западный мир. Бесплатно дают только стакан воды.
конечно, подскажу!
Это gedit, а тема называется Oblivion.
Все встроенное, за исключением шрифта (Liberation Mono) — очень его рекомендую.
:focusи:active. Всё время пользовался:active, а про:focusузнал намного позже...Так вот, по сути — это одно и то же: что такое активное состояние элемента? Это то состояние, при котором он имет фокус!
это вопрос из разряда «почему Microsoft вечно идет своим особенным непонятным путем?» Этот псевдокласс — один из шагов этого пути.
>Так вот, по сути — это одно и то же: что такое активное состояние элемента? Это то состояние, при котором он имет фокус!
Да, так и есть. Поэтому и назвали его более логично «focus». Это название устоялось в обозначении состояний. И в той же java для такого состояния есть только focus.
А насчет Микрософта — это конечно да, но в последнее время я стал задаваться другим вопросом: почему W3C всё время пытается сделать не как у Микрософта :о) Я не хочу тут разводить холиваров и вообще поклонником МС не являюсь, но есть примеры: 1) VML и SVG — насколько я помню, идея xml-языка для векторной графики появилась раньше обеих реализаций, но первой реализацией была именно VML; 2) пока писал первый пункт, забыл второй :о) Ну, неважно...
конечно, поддерживают. Потому что многие веб-мастера использовали и используют только :active. Разрабы «других» браузеров заботятся о пользователях, а не только о политике п..корпорации.
В остальном правда получается холивар. Будем придерживаться каждый своего мнения и... не будем забывать об :active и :focus =)
:hover это когда именно мышкой навели;
:focus — когда, скажем, табом перешли;
:active — когда мышкой зажали.
:focus устанавливается и при клике/зажатии.
Не знаю кто ввел :active, но он фактически дублирует фокус. Потому что элемент «активный в данный момент» === «тот, на котором фокус ввода». Фокус ввода — это далеко не только фокус ввода в текстовое поле. Это фокус ввода вообще: с помощью любого устройства ввода.
Причем, сейчас посмотрел на w3schools.com Ребята крайне хреново объяснили смысл этих классов. =/
Хотя нет, я не прав.
:active — это именно момент нажатия. То есть когда кнопка именно нажата и еще не отпущена. А фокус — либо побочный эффект нажатия на ссылку (когда она якорь), либо эффект перемещения фокуса ввода клавиатурой.
А в статье этот псевдокласс упоминается, потому что IE версий ниже 7, воспринимали :active, так же, как и :focus. При этом ничего не подозревая о самом :focus. =)
помоиму вы что-то путаете.
Вы наслаждаетесь утренним кофе, вам лень брать мышку и тянутся к ссылке...
Воспользуемся табом?
В этом случае при каждом нажатии вас будет перебрасывать на следующую ссылку. При этом стиль ссылки будет отбираться из ":focus" элемента. Тоже самое при нажатии и удерживании элемента.
Не у всех есть возможность кликать ссылки мышкой. Не лишайте их возможности "прыгать" по сайту табом. Будьте милосердны.
как раз об этом в статье и написано. =)
Или это своего рода выжимка из статьи?
:active - MouseDown на объект, MouseUp и объект теряет active
:focus - MouseDown на объект, MouseUp и объект остается с focus и теряет его, когда focus переведен на другой объект
На этом сайте как раз косяк, о котором рассказывает статья =Ъ