Просто используйте стили CSS :focus, черт побери

Просто используйте стили CSS :focus, черт побери

От автора: недавно вышло несколько статей и рекомендаций о том, как использовать :focus-visible для отображения стилей CSS focus, когда кто-то использует клавиатуру, но игнорировать их, когда пользователь взаимодействует с помощью мыши.

Лучшее, что я видел до сих пор, пост Леи Веру: Я собираюсь начать общее добавление следующего правила ко всем таблицам стилей:

Это избавляет от раздражающего контура для пользователей мыши, но сохраняет его для пользователей клавиатуры и игнорирует браузеры, которые не поддерживают :focus-visible.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Общее мнение всегда одинаково: кольца фокусировки (контуры вокруг ссылок, кнопок и других фокусируемых элементов) отстой, и мы включаем их только потому, что они нужны пользователям клавиатуры. Чушь собачья.

Стили фокуса действительно потрясающие. У моего друга Эрика Бэйли есть отличная презентация по этому вопросу. Мне лично они нравятся по той же причине, что и стили :visited на страницах с интенсивным использованием ссылок.

Даже будучи пользователем мыши, полезно знать, что в данный момент выделено фокусом, потому что я иногда также использую свою клавиатуру , часто взаимозаменяемо с мышью. Я могу быть не репрезентативным примером, но знаете ли вы, как каждый из пользователей просматривает ваши сайты и приложения?

Мы продолжаем совершать одну и ту же ошибку — предполагая, что знаем, как наши пользователи хотят использовать то, что мы создаем, или что они такие же, как мы — снова и снова.

Кроме того, стили фокусировки не должны быть безобразными. Я думаю, что настройки по умолчанию отлично подходят, но вы можете делать все что угодно, чтобы они выглядели по-другому.

Моя точка зрения: просто включите стили фокуса. Для всего выделенного фокусом. Для всего.

Источник: https://gomakethings.com/

Редакция: Команда webformyself.

PSD to HTML

Практика верстки сайта на CSS Grid с нуля

Смотреть

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий