Focus в css: Псевдокласс :focus | CSS | WebReference – Как сделать фокус на элементах страницы с помощью стилей focus CSS: примеры работы — Вебджем.рф

Содержание

Псевдокласс :focus | CSS | WebReference

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

Синтаксис ?

Селектор:focus { ... }

Обозначения

	Описание	Пример
<тип>	Указывает тип значения.	<размер>
A && B	Значения должны выводиться в указанном порядке.	<размер> && <цвет>
A \| B	Указывает, что надо выбрать только одно значение из предложенных (A или B).	normal \| small-caps
A \|\| B	Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке.	width \|\| count
[ ]	Группирует значения.	[ crop \|\| cross ]
*	Повторять ноль или больше раз.	[,<время>]*
+	Повторять один или больше раз.	<число>+
?	Указанный тип, слово или группа не является обязательным.	inset?
{A, B}	Повторять не менее A, но не более B раз.	<радиус>{1,4}
#	Повторять один или больше раз через запятую.	<время>#

Пример

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>focus</title>
  <style>
   #enter .label {
     width: 80px; /* Ширина блока с текстом */
     float: left; /* Расположение в одну строку с полем */
     text-align: right; /* Выравнивание по правому краю */
   }
   #enter .form-text {
     width: 240px; /* Ширина поля */
     margin-left: 10px; /* Расстояние между полем и текстом */
     border: 1px solid #abadb3; /* Рамка вокруг текстового поля */
     padding: 2px; /* Поля вокруг текста */
   }
   #enter .form-item {
     margin-bottom: 5px; /* Отступ снизу */
   }
   #enter .form-text:focus {
     background: #ffe; /* Цвет фона */
     border: 1px solid #29B0D9; /* Параметры рамки */
   }
   #enter p {
    margin-left: 90px; /* Сдвиг вправо */
   }
  </style>
 </head>
 <body>
  <form action="handler.php" method="post">
   <div>
     <span>Логин:</span>
     <span><input type="text" name="login" value=""></span>
   </div>
   <div>
     <span>Пароль:</span>
     <span><input type="password" name="pass"></span>
   </div>
   <p><input type="submit" value="Войти"></p>
  </form>
 </body>
</html>

Результат данного примера показан на рис. 1. При получении фокуса текстовое поле меняет цвет фона и цвет границы.

Рис. 1. Результат использования псевдокласса :focus

Примечание

Chrome не добавляет стиль для элемента a, чтобы заставить его понимать правило a:focus, добавьте к элементу <a> атрибут tabindex.

<a href="1.html" tabindex="1">Ссылка</a>

Спецификация ?

Спецификация

Каждая спецификация проходит несколько стадий одобрения.

Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
Editor’s draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
Draft (Черновик спецификации) — первая черновая версия стандарта.

Браузеры

В таблице браузеров применяются следующие обозначения.

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

Число указывает версию браузера, начиная с которой свойство поддерживается.

Автор и редакторы

Автор: Влад Мержевич

Последнее изменение: 31.08.2017

Редакторы: Влад Мержевич

Как сделать фокус на элементах страницы с помощью стилей focus CSS: примеры работы
От автора: не все просматривают интернет с помощью мыши. Если вы читаете эту статью на смартфоне, вот вам и пример! Стоит отметить, что люди используют и другие формы ввода. Этим формам нужны стили focus CSS.
Люди
Люди сложные. Мы не всегда выполняем одно и то же действие одинаково, мы не всегда принимаем решения, которые имеют смысл, глядя со стороны. Иногда мы вообще делаем что-либо просто… чтобы делать что-то. Нам быстро становится скучно: мы возимся, откапываем и подталкиваем вещи, кастомизируем их, чтобы они лучше подходили под наши нужды, независимо от их предназначения.
Люди смертны. Мы можем заболеть, нас можно ранить. Иногда и то и другое. Иногда это на какое-то время, иногда – постоянно. Это значит, что иногда мы не в состоянии делать то, что мы хотим или так, как мы это привыкли делать.
Люди живут в мире. Иногда мы попадаем в окружение, внешние факторы которого сговорились помешать нам сделать что-то так, как мы привыкли это делать. Вы когда-нибудь застревали дома у родителей на праздники, и вам приходилось использовать их старый, но все еще рабочий компьютер? Вот так бывает.
Ввод
Мышь и ввод через касание предоставляют индикатор для взаимодействия. Для касания все очевидно: ваш палец служит мостом, соединяющим ваши мысли с элементами на экране, которые нужно активировать. У мыши курсор замещает ваш палец.

Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Узнать подробнее
Однако это не единственные формы ввода, доступные нам. Всегда есть клавиатуры, которые способны на все то, что может мышь и ввод касанием, если вы знаете все правильные клавиши и их порядок. Иногда это даже быстрее и легче, чем использовать мышь!
Подумайте, когда вы последний раз пользовались копированием, вставкой и сохранением? Может, вы работали с таблицей? Вы переключались между вводом мышью и вводом клавиатурой для максимально эффективного ввода? Скорее всего, вы не обращали внимания на это, но это хороший пример переключения ввода налету для наилучшего достижения цели. Возможно вы даже успели немного «расслабиться» и поставить лайк в facebook на смартфоне.
Если вы не можете использовать руки, вам доступны другие варианты: палочки, переключатели, устройства зажима и стяжки, распознавание речи и технология отслеживания глаз могут быть способом ввода в цифровой системе. Эти устройства определят область контента и активируют ее. Это похоже на нажатие Tab на клавиатуре, и после этого подсвечивается следующая ячейка в таблице, показывая, что на нее перешел фокус, и она готова к редактированию.
На видео выше видео редактор и консультант по доступности Christopher Hills демонстрирует возможности Switch Control, ПО, помогающего людям с нарушениями моторики использовать аппаратные переключатели для управления вычислительными устройствами.
Нужно отметить, что когда-нибудь вам могла бы понадобиться эта технология, даже если чуть-чуть. Может, вы сломаете обе руки, катаясь на горном велосипеде, и захотите заказать себе что-нибудь, пока выздоравливаете. А может, вы за рулем и хотите безопасно написать текст своей семье. Или вы постарели. Несложно придумать другие примеры, люди любят поразмышлять.
Если это интерактивно, у него должны быть стили focus
Мы не можем знать, кто посещает наши сайты и веб-приложения, зачем они это делают, что они будут делать там, каких условий они ожидают, что они чувствуют или какой способ ввода они могут использовать. Это могут подсказать аналитики, но и они не составят всю картину. Было бы глупо, если бы хвост вилял собакой. Поэтому оптимизировать весь опыт на основе ограниченной информации тоже глупо.
Важно знать, что не все, кто использует вспомогательные технологии, хотят, чтобы их считали пользователями, которые используют вспомогательные технологии. Они не хотят раскрывать это. Продвинутые пользователи – люди, которые используют сочетания клавиш, специализированное ПО и расширения браузера – могут, как правило, перемещаться как пользователи со вспомогательными технологиями и не быть инвалидами. Люди сложные!
Мы можем создать предварительный опыт, который работает для всех, независимо от возможностей и обстоятельств.
Определение и активация
:focus
Как с помощью альтернативных форм ввода определить что-то, чтобы показать, что это можно активировать? К счастью, эту проблему решил CSS – необходимо использовать селекторы :focus и :active.
Синтаксис простой. Хотите обводить ссылку оранжевым, когда пользователь получил ее фокус? Как это сделать:
a:focus { outline: 3px solid orange; }
a:focus {
  outline: 3px solid orange;
}
Обводка появится, когда пользователь переведет на ссылку фокус, будь-то клик или нажатие пальцем, нажатие Tab на клавиатуре или переключатель.
Распространенное неправильное понятие, что focus стили могут использовать только свойство outline. :focus – это селектор, как и любой другой. Значит, он принимает весь диапазон CSS свойств. Мне нравится играться с цветом фона, подчеркиванием и другими техниками, которые не меняют текущий размер компонента, тем самым не сдвигая макет страницы при активации селектора.

Затем, например, мы хотим удалить подчеркивание ссылки при активации, чтобы сообщить о сдвиге состояния. Не забывайте: ссылки используют подчеркивания!
a:active { text-decoration: none; }
a:active {
  text-decoration: none;
}

Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Узнать подробнее
Важно убедиться, что изменения состояния отличаются друг от друга: от resting до focused до activated. То есть каждый переход должен быть уникальны по сравнению с другими состояниями компонента, чтобы пользователь понял, что произошло изменение.
Мы также хотим убедиться, что эти изменения состояния полагаются не только на цвет, чтобы лучше подстраиваться под людей с дальтонизмом и/или плохим зрением. Ниже показано, как только цветовое изменение состояния видит человек с дейтеронопией или красно-зеленым дальтонизмом:

Я специально удалил подчеркивание и нативное фокусное кольцо браузера со ссылки в видео, чтобы лучше проиллюстрировать проблему. Если нажимать Tab, чтобы определить интерактивные элементы страницы, не сразу становится понятно, что здесь присутствует ссылка. Если учитывать дальтонизм, то изменение состояния при наведении курсора не будет очевидным, это также касается людей с катарактой.
:focus-within
:focus-within – focus псевдокласс с очень «умиротворительным» названием – может применять стили к родителю, когда один из его дочерних элементов получает фокус. Событие focus всплывает до тех пор, пока не наткнется на CSS правило, которое просит применить стили.
Общий пример использования такого селектора – применение стилей ко всей форме, когда одно из ее полей получает фокус. В примере ниже я немного увеличиваю размер всей формы, если пользователь не изъявил желания отказаться от анимации:
Этот селектор относительно новый. Уверен, что со временем мы получим больше умных приложений.
Политика
У людей есть мнение. К сожалению, иногда они об этом не знают. Вне практики доступности есть преобладающее представление о том, что стили focus «страшные», и многие дизайнеры и разработчики удаляют их ради красоты. Иногда они даже не знают, что распространяют чье-то мнение – множество CSS resets включают полное удаление стилей focus, это без вопросов подключается как основная зависимость проекта.
Такое решение исключает людей. Веб-сайты и веб-приложения не являются закрытыми трофеями, которые отображаются без контекста в профиле dribbble, это не статичные скриншоты на гладкой корпоративной торговой площадке. Они существуют, чтобы их читали и работали с ними. Существуют правила, которые гарантируют, что это смогут сделать максимальное число людей.
:focus-visible
Дело в том, что иногда люди будут настаивать на удалении стилей focus и будут иметь достаточное влияние, чтобы заставить команду сделать это. Это противоречит правилам, которые предусматривают, что механизмы focus должны быть видимы на сайтах, чтобы те были действительно доступны. Для этого у нас есть псевдоселектор :focus-visible.
Стили псевдоселектора :focus-visible активируются, когда браузер определяет, что сработало событие фокуса, и эвристика браузера сообщает, что используется non-pointer ввод. Это причудливый способ сказать, что браузер показывает фокус при активации с помощью ввода не мышью и не пальцем.
Видео этого CodePen демонстрирует, как разные стили применяются на основе типа ввода, который получает ссылка. Когда на ссылку наводится курсор и делается клик мышью, подчеркивание ссылки удаляется, а сама ссылка немного сдвигается вниз. При нажатии Tab на клавиатуре :focus-visible применяет резкий фоновый цвет к ссылке.
Chromium недавно анонсировал, что хочет реализовать :focus-visible. Поддержка этого псевдоселектора крайне ограничена, но уже существуют полифилы. Он и :focus-within находятся в Selectors Level 4 Editor’s Draft и, возможно, получат нативную поддержку в основных браузерах.
Вы можете знать :focus-visible под его другим именем :-moz-focusring. Этот вендорный псевдоселектор – реализация Mozilla, которой предшествовало предложение 7 лет назад о :focus-visible. В отличие от другого CSS с префиксами, нам не придется думать о поддержке автопрефиксов! Firefox отличает объявление :focus-visible и :-moz-focusring, обеспечивая четкость имен селекторов между двух браузеров.
Шаг вперед, шаг назад
Поддержка в браузерах очень плохая – веб это не только Chrome и Firefox. Полифилы могут обеспечить поддержку, если нативная отсутствует, но это загрузка дополнительных данных, сложность в обслуживании и дополнительный мусор.
Стоит отметить тот факт, что устройства сейчас менее бинарны по своим типам ввода, чем раньше. Surface, флагманский компьютер от Microsoft предлагает клавиатуру, трекпад, стилус, камеру, голос и тачскрин прямо из коробки. WebAIM’s 2017 Screen Reader Survey показал, что мобильные устройства можно дополнить клавиатурой. Эвристика – это хорошо, но, как и аналитика может не давать всей картины.
Стили focus могут быть желательными для пользователей мыши. Их наличие является ясным и однозначным признаком интерактивности – отличный выбор для людей с низким зрением, проблемами мышления и для тех, кто плохо разбирается в технике. Гуру технологий, те, кто глубоко понимают скрин ридеры и знают много сочетаний клавиш как Vim для GUI, они захотят, чтобы состояние focus было очевидным, потому что они танцуют по экрану с помощью клавиатуры.
Процесс создания надежной и устойчивой сети включает создание сильного базового опыта, который работает во всех браузерах. Селектор :focus пользуется как широкой, так и глубокой поддержкой в той степени, что даже экзотические браузеры используют его.
Мир полон вещей, которые для некоторых будут смотреться страшно, а для других красиво. Лично мне focus стили не кажутся уродством. Как дизайнер, я думаю, что это фундаментальная часть создания надежной системы дизайна. Для меня, как для разработчика, описание состояния – это что-то очень привычное. Как человеку мне нравится помогать поддерживать открытость и доступность веба. Это то, каким он должен был быть.
Автор: Eric Bailey
Источник: https://css-tricks.com/
Редакция: Команда webformyself.

Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Узнать подробнее
PSD to HTML
Практика верстки сайта на CSS Grid с нуля
Смотреть
Оформляйте стили наведения, фокуса и активного состояния по-разному / Habr

В течение многих лет я оформлял состояния элементов :hover, :focus и :active одинаково. Не помню точно, когда именно начал это делать. Но это далеко не лучший подход. Почему, постараюсь объяснить в этой статье.

Вот пример кода, который всегда использовал.
.selector { &:hover, &:focus, &:active { ... } }

Когда я стал уделять больше внимания доступности интерфейса при работе с клавиатуры (состоянию фокуса в частности), пришел к выводу, что мы не должны одинаково стилизовать разные состояния элементов.
Наведение, фокус и активное состояние должны стилизоваться по-разному.
Причина проста: Это разные состояния!
Сегодня я хочу продемонстрировать вам волшебный способ оформить все три состояния без особых усилий.
Давайте начнём с :hover.
Стилизация наведения (:hover)

:hover срабатывает, когда пользователь наводит на элемент курсор мыши.
Обычно это состояние заключается в изменении цвета фона background-color и/или текста color. Различия не обязательно должны быть очевидными, потому что пользователи и так знают, что навели курсор на какой-то элемент.

button { background-color: #dedede; } button:hover { background-color: #aaa; }

Стилизация фокуса (:focus)

:focus срабатывает, когда элемент получает фокус. Это достигается двумя способами:
при выборе элемента кнопкой «Tab»

при щелчке на элемент мышью

К фокусным элементам относятся:
Ссылки (<a>)

Кнопки (<button>)

Элементы формы (<input>, <textarea> и т.д)

Элементы с атрибутом tabindex

Следует помнить о некоторых важных моментах:
Пользователи не могут выбрать кнопкой «Tab» элемент с атрибутом tabindex="-1", но могут кликнуть по нему мышью. Клик вызывает состояние фокуса.

В браузерах Safari и Firefox Mac OS клик не вызывает фокус у элементов <button>

При клике на ссылку <a>, фокус остаётся на ней, пока нажата кнопка мыши. Когда вы отпускаете кнопку, фокус перенаправляется в другое место, если в атрибуте href указан существующий на этой же странице id

Стилизуя состояние фокуса, мы больше заботимся о пользователях, работающих с интерфейсом с клавиатуры, чем о тех, кто использует мышь.
Когда пользователи нажимают «Tab», они не знают, к какому элементу перейдет фокус, а могут лишь предполагать. Вот почему нам нужно заметное изменение состояния — чтобы привлечь внимание пользователя на сфокусированный элемент.
В большинстве случаев оформление фокуса по умолчанию вполне подходит. Если вы хотите стилизовать его по-своему, помните об этих четырёх моментах:
Добавление обводки (outline)

Создание анимаций

Изменение background-color

Изменение color

Поскольку изменение свойств background-color и color часто производится при :hover, имеет смысл состояние :focus оформлять с помощью обводки или анимации.
Вы можете использовать комбинации свойств outline, border и box-shadow для создания интересных стилей фокуса. Как это можно сделать, я описал в статье «Creating a custom focus style».
button { background-color: #dedede; } button:hover { background-color: #aaa; } button:focus { outline: none; box-shadow: 0 0 0 3px lightskyblue; }

Стилизация активного состояния (:active)

При взаимодействии с чем-то в реальной жизни, вы ожидаете своего рода отклик. Например, при надавливании на кнопку, вы ожидаете, что она нажмётся.
На веб-сайтах этот отклик также полезен. Можно стилизовать момент «нажатия кнопки» с помощью :active. Вызывается это состояние, когда вы взаимодействуете с элементом. Под взаимодействием в данном случае подразумевается:

Удержание левой кнопки мыши на элементе (даже когда он не в фокусе)

Удержание кнопки пробела (на кнопках)

button:active { background-color: #333; border-color: #333; color: #eee; }

Две особенности, которые следует принять к сведению:
Удержание пробела вызывает состояние :active у кнопок (<button>), но при удержании Enter этого не происходит

Enter запускает ссылки но не вызывает активное состояние. Пробел не запускает ссылки вообще

Стили ссылок по умолчанию

Ссылки имеют стили активного состояния по умолчанию. При нажатии они становятся красными
Взаимосвязь между :active и :focus

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

Для ссылок:
При удержании левой кнопки мыши в Firefox и Chrome вызываются состояния :active и :focus. В Safari – только состояние :active (проверено только на Mac OS)

Если отпустить кнопку мыши, :focus остаётся на ссылке (если атрибут href не ссылается на id на этой же странице). В Safari фокус возвращается на <body>

Для кнопок:
Когда вы удерживаете левую кнопку мыши: оба состояния :active и :focus вызываются только в Chrome. Состояние :focus совсем не вызывается в Safari и Firefox (Mac). Я написал про это странное поведение здесь.

Если нужно, чтобы клики вызывали фокус для кнопок, нужно как можно раньше добавить этот JavaScript (для чего это нужно, можно прочитать в статье, ссылку на которую я указал выше).
document.addEventListener('click', event => { if (event.target.matches('button')) { event.target.focus() } })

Добавление этого кода изменит поведение нажатия кнопок на следующее:
При удержании кнопки мыши, :active вызывается во всех браузерах, :focus только в Chrome

Если отпустить кнопку мыши, вызывается :focus в Safari и Firefox (Mac OS). :focus остаётся на кнопке во всех браузерах

Поведение кнопок в Safari после добавления фрагмента JS-кода
Теперь, когда вы знаете всё необходимое о состояниях hover, focus и active, я хочу поговорить о стилизации всех трёх
Волшебная комбинация

Волшебная комбинация позволяет пользователям получать отклик, когда они наводят, фокусируются или взаимодействуют с элементом. Вот код, который вам нужен:
.element:hover, .element:active { /* Изменить цвет фона/текста */ } .element:focus { /* Показать обводку */ }

Для пользователей мыши:
Когда пользователь наводит на элемент, меняется background-color (и/или color). Происходит отклик.

Когда пользователь кликает на элемент, показывается обводка фокуса. Происходит отклик.

Для пользователей клавиатуры:
Когда пользователь выбирает элемент кнопкой Tab, показывается обводка фокуса. Происходит отклик.

Когда они взаимодействуют с элементом, меняется background-color (и/или color). Происходит отклик.

Лучшее из обоих миров!
Я не проверял тщательно магическую комбинацию.Это лишь аргумент в пользу этой концепции концепции. Буду признателен, если вы поможете мне проверить её и дадите знать о возможных проблемах.

Если будете проверять, не используйте Codepen. Состояние фокуса для ссылок в Codepen ведёт себя очень странно. Если навести курсор на ссылку, обводка фокуса удалится. Почему? Я не знаю. Порой мне кажется, что лучше всего проверять подобные вещи без использования дополнительных инструментов. Просто старые добрые HTML, CSS, JS.

Не волшебная (но может даже лучше) комбинация

Как я упомянул выше, клики на кнопки имеют странное поведение в Safari и Firefox на Mac OS. Если вы добавили фрагмент JavaScript-кода, который я предлагал выше, магическая комбинация всё еще работает. Но не идеально.
Вот что произойдёт в Safari и Firefox на Mac OS:
Когда пользователь держит кнопку мыши нажатой, ничего не меняется

Когда пользователи отпускают кнопку, элемент получает фокус

Если вы считаете, что этого достаточно, то волшебная комбинация работает. Можете на этом и остановиться.
Но если вы считаете такое поведение недостаточно доступным, может возникнуть желание стилизовать состояния :hover, :focus и :active по отдельности.
.element:hover { /* Изменить цвет фона/текста */ } .element:active { /* Иные изменения в цвете фона и текста */ } .element:focus { /* Показать обводку */ }

Поведение кнопки в Safari, если были стилизованы все три состояния
Вот и всё! Благодарю за чтение и надеюсь, сегодня вы узнали что-то новое.
Псевдокласс :focus-within | CSS | WebReference
Псевдокласс :focus-within определяет стиль элемента, когда он сам или элементы внутри него получают фокус. В отличие от :focus, который применяется непосредственно к самому элементу, :focus-within работает для родителя. Это позволяет выделять цветом или другими методами всю форму или отдельные её части, когда пользователь работает с полями формы.
Синтаксис ?
Селектор:focus-within { ... }
Обозначения
Описание Пример
<тип> Указывает тип значения. <размер>
A && B Значения должны выводиться в указанном порядке. <размер> && <цвет>
A | B Указывает, что надо выбрать только одно значение из предложенных (A или B). normal | small-caps
A || B Каждое значение может использоваться самостоятельно или совместно с другими в произвольном порядке. width || count
[ ] Группирует значения. [ crop || cross ]
* Повторять ноль или больше раз. [,<время>]*
+ Повторять один или больше раз. <число>+
? Указанный тип, слово или группа не является обязательным. inset?
{A, B} Повторять не менее A, но не более B раз. <радиус>{1,4}
# Повторять один или больше раз через запятую. <время>#
×
Пример
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>:focus-within</title> <style> div { padding: 10px; /* Поля вокруг текста */ } div:focus-within { background: #DEF0E7; /* Цвет фона */ } </style> </head> <body> <form action="/example/handler.php"> <div> Введите ваше имя: <input name="user"> </div> <p><button>Отправить</button></p> </form> </body> </html>
В данном примере меняется цвет фона у <div>, когда текстовое поле внутри него получает фокус (рис. 1).
Рис. 1. Использование :focus-within
Спецификация ?
Спецификация Статус
Selectors Level 4 Редакторский черновик
Спецификация
Каждая спецификация проходит несколько стадий одобрения.
Recommendation (Рекомендация) — спецификация одобрена W3C и рекомендована как стандарт.
Candidate Recommendation (Возможная рекомендация) — группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
Proposed Recommendation (Предлагаемая рекомендация) — на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
Working Draft (Рабочий проект) — более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
Editor’s draft (Редакторский черновик) — черновая версия стандарта после внесения правок редакторами проекта.
Draft (Черновик спецификации) — первая черновая версия стандарта.
×
Браузеры
В таблице браузеров применяются следующие обозначения.
— свойство полностью поддерживается браузером со всеми допустимыми значениями;
— свойство браузером не воспринимается и игнорируется;
— при работе возможно появление различных ошибок, либо свойство поддерживается лишь частично, например, не все допустимые значения действуют или свойство применяется не ко всем элементам, которые указаны в спецификации.
Число указывает версию браузера, начиная с которой свойство поддерживается.
×
Автор и редакторы
Автор: Влад Мержевич
Последнее изменение: 30.05.2018
Редакторы: Влад Мержевич
Как оформить в CSS фокус на полях ввода, кнопках и других элементах
От автора: фокус — это странное кольцо, которое появляется, когда вы промахиваетесь мимо клавиши caps и нажимаете вместо этого клавишу табуляции. Это то, о чем я два года назад особо не задумывался. Он просто не был важен для моих проектов дизайна. Но со временем, когда я начал работать над тем, чтобы сделать свои проекты более доступными, я обнаружил, что в CSS фокус не только обеспечивает доступность, но и дает возможность изучить весь подход вашей компании к дизайну.
В этой статье мы рассмотрим более сложные методы проектирования, которые вы можете использовать, чтобы сделать дизайн фокуса более привлекательным.
Почему фокус имеет значение?
Основная цель фокуса — дать пользователю руководство. Рассмотрим пользователя, который может использовать только клавиатуру для перемещения по вашему приложению. Будет ли фокус соответствовать визуальному стилю элемента или тому, как ведет себя этот элемент? Будет ли он визуально выделен вообще? Задача фокуса заключается в том, чтобы указать, с каким элементом пользователь в настоящее время имеет дело: это кнопка или блок текста?
Для пользователя со слабым зрением или слепого внешний вид вашего приложения может не иметь значения, поскольку они, вероятно, будут использовать определенные вспомогательные технологии (AT), такие как устройство чтения с экрана, чтобы помочь им перемещаться в приложении. Тем не менее, для пользователей, которые могут видеть экран, внешний вид имеет значение. Это шаблон, как и любой другой элемент, который вы разрабатываете, и он должен быть согласованным. Ваш фокус показывает пользователю, что является «кликабельным», и это помогает определить, что это за элемент.
Кроме того, фокус интересно разрабатывать. Разработав до этого сотни состояний наведения и клика, было неожиданно вдруг обнаружить и спроектировать это состояние, которое я как-то полностью упускал из виду. Я начал видеть многие мои «законченные» шаблоны в новом свете. Как и многие другие псевдоклассы в CSS, его можно стилизовать и переопределить по вашему усмотрению — то, что вы можете сделать, ограничено только вашей фантазией.

Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Узнать подробнее
Фокус по умолчанию
Прежде чем вы начнете творить сумасшедшие вещи и задавать причудливые фокусы для каждого шаблона, подумайте о том, каким будет ваш фокус по умолчанию. Это фокус, который будет применен ко всему вашему приложению и будет использоваться в качестве резервного варианта, если вы не укажете для объекта пользовательский фокус. Ваш фокус по умолчанию должен быть четко виден на фоне приложения, он должен соответствовать рекомендациям по цветовому контрасту, и он должен вписываться в цветовую палитру.
Давайте рассмотрим фокус по умолчанию для нашей библиотеки шаблонов:
*:focus {outline: 2px solid #d71ef7;}
*:focus {outline: 2px solid #d71ef7;}
Наш фокус по умолчанию — насыщенный фиолетовый, он отображается на белом (#ffffff) или не совсем белом (#fdfdfe) рабочем пространстве. Он имеет контур в 2px, поэтому он немного более заметен, чем с контуром в 1px, и имеет смещение в 2px, поэтому он не примыкает к самому тексту, например, когда вы выделяете фокусом ссылку.
Хороший пример
Плохой пример
Пройдитесь с помощью табуляции по своему приложению и обратите внимание, где у вас фокус выглядит действительно хорошо, и где он выглядит … хм, не так хорошо. Места, где стиль фокуса выглядит неподходяще — это первые кандидаты на применение индивидуального подхода.
Пользовательский фокус
Есть два случая, в которых мы используем пользовательский фокус:
Если вы хотите сделать элемент, выделенный фокусом, особенно заметным (например, элементы ввода или кнопки терминала).
Когда цвет фокуса по умолчанию не подходит для определенного фона.
Давайте рассмотрим несколько пользовательских фокусов, которые мы разработали для Cauldron.
Поля для ввода
Это не выделенное фокусом поле с Cauldron.
Мы хотели, чтобы фокус поля выглядел выделяющимся, а также согласованным с состоянием поля. Мы решили сочетать контур поля и аккуратное свечение вокруг него.
Когда поле находится в состоянии ошибки, оно выделяется более толстым контуром красного цвета, а также мы добавляем соответствующий текст об ошибке.
Когда фокус возвращается в поле с ошибкой, к толстой границе снова добавляется свечение, обеспечивая визуальную согласованность с состоянием фокуса без ошибок.

Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Узнать подробнее
Мы попытались сделать состояние фокуса для полей естественным расширением шаблона, а не чем-то контрастирующим с ним.
Кнопки
Это невыделенная фокусом основная кнопка из Cauldron:
Фокус кнопки терминала — это мой личный фаворит не только потому, что сторонний разработчик блестяще выполнил его, но и потому, что он визуально интересен и сразу идентифицируется как состояние фокуса.
Наши вторичные кнопки и кнопки ошибок используют один и тот же фокус, но их цвет изменяется, чтобы соответствовать тексту.
Мы сделали фокусы кнопок визуально выделяющимися, поскольку они используются для действий терминала в приложениях.
Диалоги
Когда пользователь экранного диктора выделяет фокусом форму с текстом или заголовком, эта информация должна считываться. Поэтому для формы нужно задавать определенное состояние фокуса. Для этого часто используется подсветка формы (иногда невидимая?). Когда у нас есть текстовые области, мы используем пару различных фокусов, чтобы позволить AT считывать их, обеспечивая при этом визуальную чистоту дизайна.
Для фрагментов текста, которые будут считываться в блоке, мы используем полосу слева, которая отображается в блоке, ограничивающем объект, например, здесь, в нашем предупреждении. После того, как вы снова нажмете клавишу табуляции, фокус перейдет на следующий табулируемый объект — в данном случае кнопка READY.
Для таких вещей, как модальные окна, где у нас есть форма с четким заголовком, мы используем подстрочный указатель для указания фокуса. Он также перемещается к первому табулируемому объекту после того, как вы нажмете клавишу табуляции — в этом случае поле имени.
Не подходит фокус по умолчанию
Бывают случаи, когда вы не хотите создавать пользовательский фокус, но дизайн по умолчанию не соответствует цвету фона. Бьюсь об заклад, вы можете сами угадать, что вам нужно сделать: изменить цвет фокуса. Ниже приведен пример из наших проектов.
Хороший пример
Плохой пример
Несмотря на то, что крестик закрытия использует фокус по умолчанию, нам нужно было изменить цвет, чтобы лучше передать цветовой контраст и соответствовать цветовой схеме.
Чего следует избегать
Несколько вещей, которых вы должны пытаться избегать при разработке фокуса:
Фокус, который является слишком дискретным. Я думаю, что мы все видели ужасный пунктирный фокус, который практически не виден. Фокус должен быть визуально четким.
Исчезающий фокус. Это часто является проблемой, связанной с z-index, и она часто встречается в меню с вкладками. Важно убедиться, что фокус элемента не отключается чем-то другим.
Визуально несогласованный фокус. Это, безусловно, зависит от вашего видения дизайна, но не забывайте о правиле: если что-то кажется неподходящим, скорее всего, это действительно не подходит.
У нас есть еще много примеров фокусов, которые мы используем на нашем сайте шаблонов Coddron, и мы хотели бы услышать ваши отзывы. Если у вас есть какие-либо советы или приемы, которые вы считаете эффективными, или даже примеры отличных фокусов, которые вы нашли, поделитесь ими.
Автор: Aaron Pearlman
Источник: https://www.deque.com/
Редакция: Команда webformyself.

Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Узнать подробнее
PSD to HTML
Практика верстки сайта на CSS Grid с нуля
Смотреть
Фокусы со стилями для фокуса — CSS-LIVE
Перевод статьи Focusing on Focus Styles с сайта css-tricks.com для CSS-live.ru, автор — Эрик Бейли
Не у каждого пользователя интернета есть мышка под рукой. При чтении со смартфона это очевидно! К тому же есть и другие способы ввода, которыми люди решают свои задачи. И для них нужны стили для фокуса.
Люди
Люди сложно устроены. Мы не всегда последовательны, а наши решения не всегда выглядят логичными. Порой мы даже делаем что-то просто так. Нам легко надоедает возиться и ковыряться с вещами, чтобы они лучше соответствовали нашим потребностям, независимо от их первоначального предназначения.
Люди также смертны. Мы можем заболеть или пораниться, случаются и обе беды сразу. Иногда это на время, а иногда — на всю жизнь. Как бы то ни было, порой привычные способы добиться нужного или желаемого бывают нам недоступны.
Люди также живут не в вакууме. Иногда нашим привычным действиям противостоят окружающая среда и внешние факторы. Вы когда-либо застревали в доме своих родителей на время праздников, когда вам приходилось пользоваться их древним, но ещё рабочим настольным компьютером? Ну вот.
Ввод
Как мышь, так и сенсорный ввод служат индикатором для взаимодействия. Для сенсора это ясно: палец — связующее звено между вашим разумом и предметом на экране, который ему нужно активировать. В случае мыши, курсор служит посредником для вашего пальца.
Однако, есть ещё множество других форм ввода. Клавиатуры есть повсюду и могут практически полностью заменить мышь или сенсорный ввод, если знать нужные клавиши для нажатия в правильном порядке. Иногда это проще и быстрее мыши!
Вспомните, когда вы в последний раз использовали функциональность «Вырезать», «Копировать», «Вставить» и «Сохранить». Возможно, во время работы с таблицей, например, с Excel? Вы переключались между мышкой и клавиатурой, чтобы работать эффективнее? Вероятно, вы делали это «на автомате», но это яркий пример переключения ввода на лету ради быстрого результата. Да чёрт возьми, может во время этого нудного занятия у вас ещё нашлось время, чтобы лайкнуть чью-либо запись в Facebook на смартфоне.
Если обстоятельства мешают вам вводить информацию руками, то есть и другие варианты: манипуляторы, которые крепятся к голове или управляются ртом, кнопки-переключатели, устройства, управляемые вдуванием и вытягиванием воздуха из трубки, технологии распознавания голоса и отслеживания взгляда — всё это может служить для ввода в цифровой системе. Эти устройства идентифицируют область содержимого и активируют её. Напоминает хождение по ячейкам таблицы с помощью табуляции, когда ячейки подсвечиваются и готовы к редактированию. Это как по нажатию клавиши табуляции подсвечивается следующая ячейка в таблице, указывая на то, что в нее переместились для редактирования.
На этом видео, редактор видеороликов и консультант по доступности Кристофер Хилс демонстрирует возможности «Switch Control», программного обеспечения, помогающего людям с нарушением двигательной функции использовать аппаратные переключатели для работы со своими вычислительными устройствами.
Возможно это технология когда-нибудь пригодится и вам. К примеру, вы сломали обе руки, неудачно покатавшись на горном велосипеде, и хотите заказать что-нибудь вкусненькое с доставкой себе в утешение, пока вы поправляетесь. Или, скажем, едете за рулём и хотите безопасно написать эсэмэску своей семье. Или просто состаритесь. Навскидку полно и других примеров, просто люди обычно гонят от себя подобные мысли.
Если это интерактивно, этому нужен стиль фокуса
Не всегда известно, кто посещает наши сайты или приложения, причину их посещения, мотивы, время посещения, в каких условиях они находятся, какие эмоции испытывают, или какой ввод они могут использовать. Аналитика может помочь отчасти, но не даст полную картину. Было бы глупо ставить телегу впереди лошади и оптимизировать всю логику интерфейса лишь по этой обрывочной информации.
Также важно знать, что не все пользователи вспомогательных технологий хотят это афишировать. Да они и не обязаны. Продвинутые пользователи, использующие сочетания клавиш, специализированное программное обеспечение и браузерные расширения могут показаться пользователями вспомогательных технологий, но вполне могут и не быть инвалидами. Опять же, люди сложны!
Главное, дать эту возможность всем независимо ни от чего.
Идентификация и активация
:focus
Как с помощью этих альтернативных форм ввода можно определить, что это подходит для активации? К счастью, в CSS это решено — мы используем селекторы :focus и :active.
Они довольно просты. Хотите обвести ссылку оранжевым, когда пользователь переведет на неё фокус? Вот как это описать:
a:focus { outline: 3px solid orange; }
Этот контур появится, когда кто-то переместится к ссылке, будь то клик, касание сенсора, переход клавишей Tab с клавиатуры или ввод с помощью кнопки-переключателя, чтобы выделить её.
Есть популярное заблуждение, будто к стилям фокуса можно применить только свойство outline Отмечу, что :focus — это такой же селектор, как и любой другой, а значит, он принимает любые CSS-свойства. Я люблю играть с фоновым цветом, подчёркиванием и другими приемами, не влияющими на текущий размер компонента, чтобы не сдвигать раскладку страницы при активации селектора.
Затем, скажем, нужно удалить подчёркивание активированной ссылки, чтобы сообщить о смене состояния. Помните: ссылки используют подчёркивание!
a:active { text-decoration: none; }
Важно, чтобы все изменения состояния — из обычного в состояние под фокусом, а оттуда в активное — различались. Это значит, что каждый переход должен быть уникальным по сравнению с другими состояниями компонента, указывая пользователю на изменение.
Смена состояния также не должна ограничиваться лишь сменой цвета — не забывайте о людях с дальтонизмом и/или плохим зрением. Вот как изменение только лишь состояния цвета может выглядеть для человека с дейтеранопией, или неспособностью различать красный и зеленый цвета:
Чтобы лучше проиллюстрировать проблему, я намеренно удалил подчёркивание и браузерную нативную обводку фокуса из ссылки на видео. Если перебирать всё интерактивное на странице клавишей Tab, эту ссылку можно сразу и не заметить. Если человек не различает цвета, он не увидит и изменения ее состояния при наведении, а если у него к тому же катаракта — то и подавно.
:focus-within
:focus-within — связанный с фокусом селектор псевдокласса, название которого, «фокус внутри», звучит очень по-дзенски — может применять стили к родительскому элементу, когда один из его дочерних элементов получает фокус.
Типичный случай, когда этот селектор может быть нужен — если надо применить стили ко всей форме, когда один из элементов input в ней получает фокус. В примере ниже я плавно увеличиваю размер всей формы, если только пользователь не пожелал ограничить анимации до минимума.
See the Pen :focus-within Demo by Eric Bailey (@ericwbailey) on CodePen.
Этот селектор по-прежнему относительно новый, поэтому я уверен, что со временем найдется гораздо больше интересных вариантов его использования.
Взгляды
У людей также есть мнения. К сожалению, порой эти мнения не подкреплены знаниями. Среди людей, не занимающихся доступностью, господствует мнение, что стили фокуса «безобразны», и многие дизайнеры и разработчики удаляют их ради внешнего лоска. А порой они даже не подозревают, что распространяют чужое мнение — многие CSS-сбросы включают глобальное удаление стилей фокуса, и включаются в проект в качестве фундаментальной зависимости, как что-то само собой разумеющееся.
Это решение исключает людей. Сайты и приложения — это не предметы роскоши, которые в отрыве от контекста должны красоваться у вас в портфолио, и не статичные скриншоты в складной корпоративной презентации. Они нужны, чтобы их читали и пользовались ими, и есть правила, которые помогут максимально возможному количеству людей делать именно это.
:focus-visible
Правда жизни в том, что порой люди настаивают на удалении стилей фокуса, и у них бывает достаточно влияния, чтобы навязать это своему окружению. Это идет вразрез с правилами, что на действительно доступных сайтах механизмы фокуса должны быть видимыми. Эту проблему решает псевдоселектор :focus-visible.
Псевдокласс :focus-visible срабатывает, когда браузер определил, что произошло событие фокуса, и специальные встроенные эвристики подсказали ему, что имел место ввод без указателя. Или, если не такими мудрёными словами — он показывает стили для фокуса, если элемент активирован не курсором мыши и не пальцем на сенсоре.
На видеозаписи этого примера с Codepen видно, как в зависимости от того, каким способом пользователь выбирает ссылку, к ней применяются разные стили. При наведении и клике по ссылке мышью удаляется её подчёркивание, а сама она немного сдвигается вниз. При переходе к ней клавишей Tab с клавиатуры :focus-visible вместо этого применяет к ссылке яркий цвет фона.
Недавно Chromium заявил о своём намерении реализовать :focus-visible. Несмотря на сегодняшнюю скудную поддержку браузерами, есть полифил. Вместе с :focus-within они находятся в редакторском черновике селекторов четвёртого уровня, и со временем их начнут поддерживать все основные браузеры.
Вы можете знать :focus-visible под другим названием :-moz-focusring. Так, в виде псевдоселектора с префиксом, эту же идею реализовала Mozilla, еще за семь лет до предложения :focus-visible. В отличие от других браузерных префиксов CSS, нам не придётся беспокоиться о поддержке авторасстановки префиксов! Firefox признает как объявление :focus-visible, так и :moz-focusring, гарантируя, что между двумя браузерами будет паритет для наших названий селекторов.
Шаг вперёд, шаг назад
С браузерной поддержкой не всё гладко — одними лишь Chrome и Firefox веб не ограничивается. Пусть полифил отлично справляется там, где нет нативной поддержки, мы всё равно загружаем лишние данные, получаем дополнительную сложность в поддержке и более хрупкий код.
Также стоит отметить, что теперь нет такого четкого противопоставления двух классов устройств по типу ввода, как было раньше. Флагманский компьютер Surface от Microsoft предлагает клавиатуру, трекпад, стилус, камеру, голос и сенсорную функциональность из коробки. Исследование использования скринридеров WebAIM в 2017 г. показало, что мобильные устройства могут дополняться клавиатурным вводом чаще чем вы думаете. Эвристика — это хорошо, но как и аналитика, она не даёт полной картины.
Стоит учесть еще и то, что пользователям с мышкой тоже бывают нужны стили для фокуса. Эти стили — чёткий и однозначный признак интерактивности, что даёт большое преимущество людям с плохим зрением, когнитивными проблемами, и людям, которые не очень дружат с техникой. Особо продвинутые пользователи, которые не понаслышке знают, что скринридеры и горячие клавиши — это как Vim по сравнению с графическими оболочками, захотят, чтобы состояние фокуса было очевидным, ведь они порхают по экрану, используя клавиатуру.
Залог надёжного и устойчивого веба — это крепкая базовая функциональность, работающая в любом браузере. У ванильного селектора :focus настолько широкая поддержка, что можно быть уверенным, что даже экзотические браузеры его поймут.
В мире полно вещей, которые одним кажутся безобразными, а другим красивыми. Лично для меня стили фокуса не помеха. Как дизайнеру, мне кажется, что это необходимая часть создания зрелой системы дизайна. Как для разработчика, описывать состояние для меня — привычная работа. Как человеку, мне нравится сохранять интернет открытым и доступным, каким он и должен быть.
Если есть желание продвинуться в этой теме ещё дальше, дизайнер интерфейсов Кэйтлин Джийер отлично написала про индикаторы фокуса.
P.S. Это тоже может быть интересно:
Использование псевдо-класса focus visible в CSS для управления видимостью стилей при фокусе
От автора: для чего нужен focus visible? Четко видимые стили в состоянии выделения фокусом ввода важны для пользователей, работающих в основном с клавиатуры. Однако эти стили часто могут быть нежелательными, когда они применяются в результате взаимодействия мыши / указателя. Классическим примером этого являются кнопки, которые вызывают определенное действие на странице, например, перемещение кадров карусели. В то время, как нам важно, чтобы пользователь клавиатуры мог видеть, когда фокус ввода находится на кнопке, пользователя мыши могут ввести в заблуждение не те изменения стилей кнопки после клика кнопки, которых он ожидал. Он может задаться вопросом, почему стили «застревают»? Или, возможно, состояние / функционал кнопки каким-то образом изменились?
По этой причине современные браузеры применяют простую эвристику, чтобы определить, применять ли стиль фокуса ввода по умолчанию. В общем случае, если элемент был выделен фокусом ввода в результате клика мышью, браузеры опускают индикацию фокуса по умолчанию. (Примечание: некоторые браузеры используют более сложную эвристики, например, Firefox не опускает стили фокуса по умолчанию, даже в результате клика мышью, если пользователь ранее использовал TAB / SHIFT+TAB для навигации по странице).
Однако, когда авторы определяют явные стили :focus, эвристика браузера игнорируется. Стили :focus применяются каждый раз, когда элемент выделен фокусом, либо в результате взаимодействия с клавиатурой, либо мышью / указателем.
Чтобы решить эту проблему, авторам пришлось прибегать к хакерским «решениям», обычно использующим JavaScript (например, отличное What Input?).
Недавно представленный псевдо-класс :focus-visible (стандартизированная версия -moz-focusring из Firefox) предназначен для предоставления стандартизированного решения, основанного на CSS. Вместо определения традиционных стилей :focus авторы могут использовать :focus-visible, и браузеры (используя свою встроенную эвристику) будут применять эти стили только в той же ситуации, что и стили :focus по умолчанию. Обратите внимание, что на момент написания данной статьи ни в одном из браузеров еще не реализовано :focus-visible (см. информацию canisue.com по :focus-visible), но если вы «смотрите в будущее» и уже планируете использовать этот псевдо-класс чтобы воспользоваться его преимуществами после реализации в браузерах, прочитайте эту статью…

Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Узнать подробнее
В качестве базового примера предположим, что наши текущие стили включают следующее:
button:focus { /* определенные явные стили фокуса кнопки */ }
button:focus { /* определенные явные стили фокуса кнопки */ }
Эти явные стили :focus настоящее время применяются каждый раз, когда кнопка выделяется фокусом. В будущем, когда браузеры начнут поддерживать :focus-visible, вместо этого мы сможем использовать:
button:focus-visible { /* определенные явные стили фокуса кнопки */ }
button:focus-visible { /* определенные явные стили фокуса кнопки */ }
В принципе, авторы не смогут просто заменить:focus на :focus-visible, так как это нарушит совместимость и оставит пользователей клавиатуры без явных стилей :focus (кроме того, что по умолчанию браузер может по-прежнему применять их). В идеале нам нужно использовать :focus-visible только в браузерах, которые его поддерживают. К сожалению, поскольку :focus-visible является псевдо-классом, мы не можем использовать @supports, так как запросы функций не поддерживают их (пока?), как часть условий. Но, даже если бы это было так, то, чтобы обслуживать как неподдерживающие, так и поддерживающие браузеры, мы по существу определяли бы стили :focus как обычно, а затем удаляли бы эти стили и повторяли их снова для :focus-visible. Это рабочее решение, но не совсем красивое.

Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Узнать подробнее
/* это на самом деле не работает, так как @supports не поддерживает псевдо-классы… но это демонстрирует, насколько неэлегантным является решение, сначала задавать, а потом отменять стили :focus */ button:focus { /* определенные явные стили фокуса кнопки */ } @supports (:focus-visible) { button:focus { /* отменяем все указанные выше стили фокуса кнопки */ } button:focus-visible { /* и затем вновь переопределяем эти стили */ } }
/* это на самом деле не работает, так как @supports не поддерживает псевдо-классы… но это демонстрирует, насколько неэлегантным является решение, сначала задавать, а потом отменять стили :focus */
button:focus { /* определенные явные стили фокуса кнопки */ }
@supports (:focus-visible) {
button:focus { /* отменяем все указанные выше стили  фокуса кнопки */ }
button:focus-visible { /* и затем вновь переопределяем эти стили */ }
}
Мы можем прибегнуть к JavaScript, чтобы попытаться определить поддержку :focus-visible (например, посмотрите обсуждение на StackOverflow того, как определить, поддерживает ли браузер указанный псевдо-класс CSS), а затем динамически менять определения стилей или целые таблицы стилей … но это, кажется, не совсем соответствует цели создать решение на чистом CSS.
Наиболее жизнеспособным (хотя все еще не особенно элегантным) решением может быть использование обратного псевдо-класса :not() и (как ни парадоксально это звучит) определить стили для не :focus-visible, но отменять стили :focus, когда он отсутствует.
button:focus { /* определенные явные стили фокуса кнопки */ } button:focus:not(:focus-visible) { /* отменяем все указанные выше стили фокуса кнопки, если кнопка выделена фокусом ввода, но браузер обычно не отображает стили фокуса по умолчанию */ }
button:focus { /* определенные явные стили фокуса кнопки */ }
button:focus:not(:focus-visible) { /* отменяем все указанные выше стили фокуса кнопки, если кнопка выделена фокусом ввода, но браузер обычно не отображает стили фокуса по умолчанию */ }
Обратите внимание, что это работает даже в браузерах, которые не поддерживают :focus-visible, потому что хотя :not() включает псевдо-классы, как часть списка поддерживаемых селекторов, браузеры будут игнорировать все это, если использован псевдо-класс, который они не распознают / поддерживают, что означает, что весь блок button:focus:not(:focus-visible) { … } никогда не будет применен.
Возможно, мы получим определенные преимущества от использования :focus-visible, если хотим предоставить дополнительные лучшие стили для браузеров, которые его поддерживают, поскольку мы могли бы предположить, что они будут применяться эти стили только в случае выделения фокусом ввода с клавиатуры (или, точнее, когда эвристика браузера определила, что индикация видимого фокуса подходит для данного случая). Но это все равно означало бы, что в старых / неподдерживающих браузерах мы сознательно предоставляем неидеальный опыт.
button:focus { /* определенные явные стили фокуса кнопки */ } button:focus:not(:focus-visible) { /* отменяем все указанные выше стили фокуса кнопки, если кнопка выделена фокусом ввода, но браузер обычно не отображает стили фокуса по умолчанию */ } button:focus-visible { /* определенные *еще более* явные стили фокуса кнопки */ }
button:focus { /* определенные явные стили фокуса кнопки */ }
button:focus:not(:focus-visible) { /* отменяем все указанные выше стили фокуса кнопки, если кнопка выделена фокусом ввода, но браузер обычно не отображает стили фокуса по умолчанию */ }
button:focus-visible { /* определенные *еще более* явные стили фокуса кнопки */ }
Итак, к чему мы пришли? После того, как все браузеры реализуют поддержку :focus-visible, для ситуации, когда применение отдельных стилей для элемента, выделенного фокусом ввода в результате клика мышью / указателем, считается нежелательным, мы просто будем использовать :focus-visible там, где мы раньше использовали :focus. Тем не менее, для поддержки браузеров, которые не реализуют псевдо-класс, нам придется либо использовать полифилл для поддержки :focus-visible, либо всегда использовать менее элегантный метод :not(:focus-visible) в ситуациях, когда в браузере не установлена стандартная индикация фокуса по умолчанию.
Автор: Patrick H. Lauke
Источник: https://developer.paciellogroup.com/
Редакция: Команда webformyself.

Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Узнать подробнее
PSD to HTML
Практика верстки сайта на CSS Grid с нуля
Смотреть