Завжди використовуйте hover разом із focus, HTML та CSS

завжди

Завжди використовуйте :hover разом із :focus

У ній розповідається про те, що може спричинити ігнорування псевдокласу :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.

Цей параграф – окрема замітка. Усі бажаючі можуть ознайомитись з оригіналом статті.

  • L oVe'sH urtsF adeA way;
  • L utherV androssH itsF abulousA rpeggios;
  • L ordV aderH atesF urryA nimals;
  • L ustyV ampiresH ungerF orA bsinthe;
  • L ordV oldemortH asF oulA mbitions.

Невелика лірична

Автор: Дмитро Копров

Музикант, який одного разу прокинувся програмістом ;-) Фронт- та бек-енд розробник, фахівець широкого профілю. Твіттер: @dkoprov.

Розкажіть друзям

Коментарі — 25

>Так ось, по суті - це те саме: що таке активний стан елемента? Це той стан, коли він має фокус!

У цьому випадку при кожному натисканні вас перекидатиме на наступне посилання. При цьому стиль посилання буде відбиратися з елемента ": focus". Теж саме при натисканні та утримуванні елемента.