Обводка при фокусе css

How to Style CSS Focus Outline

Do you ignore focus styles because they’re ugly? I’m going to explain why you shouldn’t remove them, and show you how to style them to match your UI (user interface) instead.

Let’s say you’re presented with the design above. If you were to just Tab through, it’s functional — but we can agree it’s not something to behold.

Removing Focus Outline Is Bad For Accessibility

You might be tempted to remove focus styles. There’s only one problem. It’s terrible for accessibility. Focus outline provides visual feedback for users who can’t use a mouse, or have visual impairment, when using Tab on their keyboard for navigation.

/* 🚫 don't do this */ :focus   outline: none; > 

Be mindful that impairment doesn’t only refer to people with permanent disabilities. You can have temporary impairment due to injury, so the number of people with impairments is higher than you might think.

It’s our responsibility to make the web accessible for everyone.

Outline Doesn’t Work for Rounded Corners

/* ⚠️ doesn't work for rounded corners */ :focus   outline: 3px solid hsla(220, 100%, 50%, 80%); > 

There is no way of specifying a border radius for outline at the moment, other than some browser specific experimental features.

Using Border Causes Layout Shifts

/* 🚫 don't do this */ :focus   outline: none;  border: 3px solid hsla(220, 100%, 50%, 80%); > 

The layout shifts from the border cause our elements to jump around. It can probably be solved by setting a border on each element with no opacity, and then bring the opacity back on focus. I don’t hate this idea, but it’s not great.

Use Box Shadow

/* ✅ do this */ :focus   outline: none;  box-shadow: 0 0 0 3px hsla(220, 100%, 50%, 80%); > 

This works for any focusable element. Not only does it take on the same rounded corners, but you can control other properties such as color, opacity, offset, and blur. You can read more about box-shadow here.

Notice we’re also able to animate the transition.

.element   transition: box-shadow 0.3s ease; > 

Conclusion

Accessibility is important. It’s an important subject worth understanding. No one goes out of their way to create a bad user experience on purpose. If you’re aware, and strive to make the web a better place — that’s what counts.

If you want to support the content you’re reading or watching on YouTube consider becoming a patreon starting low as 1$ per month.

Every post is a Markdown file so contributing is simple as following the link below and pressing the pencil icon inside GitHub to edit it.

Источник

:focus

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

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

Важно! В браузерах Safari и Firefox на Mac при клике мышкой на кнопку фокус не устанавливается.

Пример

Скопировать ссылку «Пример» Скопировано

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

 button:focus  outline: 2px solid #ffffff; outline-offset: 3px;> button:focus  outline: 2px solid #ffffff; outline-offset: 3px; >    Скопировать Скопировано Не удалось скопировать   

Как пишется

Скопировать ссылку «Как пишется» Скопировано

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

 a:focus  outline: 2px solid hotpink;> a:focus  outline: 2px solid hotpink; >    Скопировать Скопировано Не удалось скопировать   

Как понять

Скопировать ссылку «Как понять» Скопировано

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

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

 :focus  outline: -webkit-focus-ring-color auto 1px;> :focus  outline: -webkit-focus-ring-color auto 1px; >    Скопировать Скопировано Не удалось скопировать   

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

Подсказки

Скопировать ссылку «Подсказки» Скопировано

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

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

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

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

На практике

Скопировать ссылку «На практике» Скопировано

Алёна Батицкая советует

Скопировать ссылку «Алёна Батицкая советует» Скопировано

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

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

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

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

Источник

:focus — visible

Выделяем элементы в фокусе только тогда, когда это действительно необходимо.

Время чтения: меньше 5 мин

Обновлено 12 октября 2022

Кратко

Скопировать ссылку «Кратко» Скопировано

Псевдокласс :focus — visible используется, когда действительно нужно визуально выделить элементы в фокусе.

Пример

Скопировать ссылку «Пример» Скопировано

При попадании фокуса на кнопку будем показывать белую обводку. Обратите внимание, что мы сбросили стили для :focus , поэтому если установить фокус на кнопку, нажав на неё, обводки не будет. Но если использовать Tab , то обводка появится.

 button:focus  outline: none;> .button:focus-visible  border: 2px solid #FFFFFF; outline: none;> button:focus  outline: none; > .button:focus-visible  border: 2px solid #FFFFFF; outline: none; >    Скопировать Скопировано Не удалось скопировать   

Как пишется

Скопировать ссылку «Как пишется» Скопировано

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

 a:focus-visible  outline: 2px solid hotpink;> a:focus-visible  outline: 2px solid hotpink; >    Скопировать Скопировано Не удалось скопировать   

Как понять

Скопировать ссылку «Как понять» Скопировано

Зачем нужен этот :focus — visible , если есть :focus ? Оба псевдокласса применяются, когда элемент в фокусе. Но отличие в том, что :focus — visible используется только тогда, когда браузер считает, что наличие фокуса на элементе необходимо обозначить визуально.

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

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

Подсказки

Скопировать ссылку «Подсказки» Скопировано

💡 Изменить стандартное поведение фокуса можно с помощью атрибутов contenteditable и tabindex .

Источник

How to Style CSS Focus Outline

Do you ignore focus styles because they’re ugly? I’m going to explain why you shouldn’t remove them, and show you how to style them to match your UI (user interface) instead.

Let’s say you’re presented with the design above. If you were to just Tab through, it’s functional — but we can agree it’s not something to behold.

Removing Focus Outline Is Bad For Accessibility

You might be tempted to remove focus styles. There’s only one problem. It’s terrible for accessibility. Focus outline provides visual feedback for users who can’t use a mouse, or have visual impairment, when using Tab on their keyboard for navigation.

/* 🚫 don't do this */ :focus   outline: none; > 

Be mindful that impairment doesn’t only refer to people with permanent disabilities. You can have temporary impairment due to injury, so the number of people with impairments is higher than you might think.

It’s our responsibility to make the web accessible for everyone.

Outline Doesn’t Work for Rounded Corners

/* ⚠️ doesn't work for rounded corners */ :focus   outline: 3px solid hsla(220, 100%, 50%, 80%); > 

There is no way of specifying a border radius for outline at the moment, other than some browser specific experimental features.

Using Border Causes Layout Shifts

/* 🚫 don't do this */ :focus   outline: none;  border: 3px solid hsla(220, 100%, 50%, 80%); > 

The layout shifts from the border cause our elements to jump around. It can probably be solved by setting a border on each element with no opacity, and then bring the opacity back on focus. I don’t hate this idea, but it’s not great.

Use Box Shadow

/* ✅ do this */ :focus   outline: none;  box-shadow: 0 0 0 3px hsla(220, 100%, 50%, 80%); > 

This works for any focusable element. Not only does it take on the same rounded corners, but you can control other properties such as color, opacity, offset, and blur. You can read more about box-shadow here.

Notice we’re also able to animate the transition.

.element   transition: box-shadow 0.3s ease; > 

Conclusion

Accessibility is important. It’s an important subject worth understanding. No one goes out of their way to create a bad user experience on purpose. If you’re aware, and strive to make the web a better place — that’s what counts.

If you want to support the content you’re reading or watching on YouTube consider becoming a patreon starting low as 1$ per month.

Every post is a Markdown file so contributing is simple as following the link below and pressing the pencil icon inside GitHub to edit it.

Источник