skip to main content

:focus

css

Кратко 🔗

Сайтом можно пользоваться не только с использованием мышки, но и при помощи клавиатуры. При переключении клавишей Tab элементу добавляется псевдокласс :focus и мы можем задать для него красивые стили.

Элементы формы могут получить фокус и при клике мышкой на него. Например, если кликнуть по кнопке или в поле ввода текста, то им будет добавлен псевдокласс :focus.

Пример псевдокласса focus

Пример 🔗

При попадании фокуса на кнопку будем показывать точечную рамку красного цвета:

button:focus {
border: 1px dotted red;
}

Как пишется 🔗

После любого селектора ставим двоеточие и пишем ключевое слово focus.

a:focus {
} /* Селектор по тегу + :focus */
.link:focus {
} /* Селектор по классу + :focus */
li .link:focus {
} /* Составной селектор + :focus */
#id:focus {
} /* Селектор по тегу + :focus */
.link:before:focus {
} /* Селектор по классу + псевдоэлемент + :focus */

Как это понять 🔗

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

Важно знать, что в стандартных стилях браузера уже прописаны дефолтные стили для фокуса интерактивных элементов. Например, в Google Chrome вокруг элемента появляется прямоугольная фиолетовая рамка. Стили для неё:

:focus {
outline: -webkit-focus-ring-color auto 1px;
}

Важно! Не удаляйте стили для фокуса полностью. Если вам не нравятся дефолтные стили — измените их. При полном удалении фокуса пользователь не будет понимать в какой части страницы он находится, если его сценарий пользования сайтом отличается от привычного.

Подсказки 🔗

💡 Смену стилей между состояниями можно анимировать при помощи transition 🎉

💡 В браузер встроены дефолтные стили для фокуса.

💡 Нельзя полностью удалять стили для фокуса, заменяйте их на свои, если дефолтные не нравятся.

💡 Стили для фокуса можно увидеть открыв сайт и несколько раз нажав клавишу Tab. Или нажмите на кнопку, поставьте курсор в поле ввода.

В работе 🔗

Алёна,

🛠 В какой-то момент разработчики так разозлились на обводку, появляющуюся при фокусе, что начали её полностью убирать, переопределяя стандартные стили. Какое-то время это было очень распространено, но довольно быстро пришло осознание, что тем самым мы портим опыт использования интернетом части людей. Например, на момент написания этой статьи на сайте Алиэкспресс отключена обводка на интерактивных элементах. И если вы попробуете походить по сайту используя клавиатуру, то не сможете понять, где находится ваш курсор в данный момент.

Не стоит думать, что абсолютно все, кто попадают в интернет используют мышку для навигации. Есть люди с временно или постоянно ограниченными способностями, которым гораздо комфортнее использовать для навигации по сайту клавиатуру. И они должны видеть где именно в данный момент находится курсор.

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

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

Автор: Алёна,