Focus active hover: Стилизуйте состояния hover, focus и active по-разному | by Uriy

Стилизуйте состояния hover, focus и active по-разному | by Uriy

Перевод статьи Zell Liew Style hover, focus, and active states differently

Много лет я стилизовал hover, focus и active одинаково. Я даже не могу вспомнить, когда я начал это делать таким образом. Вот пример кода, который я обычно использую:

// Not the best approach. I'll explain why in this article
.selector {
&:hover, 
&:focus,
&:active {
// Styles here
}
}

Как только я начал уделять больше внимания доступности (и как следствие уделять больше внимания состоянию focus), я начал понимать, что мы не должны стилизовать состояния hover, focus и active одинаковым образом.

Состояния hover, focus и active не должны быть стилизованы одинаково.

Вот простая причина для этого: это разные состояния!

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

Давайте начнем с hover.

Состояние hover инициируется, когда пользователь наводит свою мышь на элемент.

Состояние hover обычно представлено изменениями background-color (и\или color). Разница стилей между состоянием hover и его отсутствием не обязательно должна быть ярко выраженная, потому что пользователь уже знает, что он навел мышку на что-то.

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

focus активируется, когда происходит фокусировка на элементе. Это может происходить в одном из двух случаев:

1. Когда пользователь переключается с помощью кнопки tab между элементами
2. Когда пользователь кликает на элемент, который поддерживает состояние focus

Следующие элементы поддерживают состояние focus:

• Ссылки (<a>)
• Кнопки (<button>)
• Элементы формы (input, textarea, и тому подобное)
• Элементы со свойством tabindex

Пара важных моментов:

1. Пользователь не может переключиться с помощью кнопки tab на элемент со свойством tabindex=”-1″, но он может кликнуть на него, тем самым переключив элемент в состояние focus
2. В браузерах Safari и Firefox (на Mac) клик на элемент button не вызывает состояние фокусировки. Подробнее по этой ссылке https://zellwk.com/blog/inconsistent-button-behavior/
3. Когда вы нажимаете на элемент <a>, фокус остается на <a> до тех пора, пока вы не уберете палец с мыши. Когда вы все же уберете палец, фокус будет смещен в другой элемент, если атрибут href указывает валидный id элемента на вашей странице.

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

Когда пользователь жмет tab, он не знает на какой элемент будет смещен фокус. Он может только догадываться. И поэтому нам требуется явное изменение стилей, чтобы пользователь заметил, что изменился фокус.

Использование стилизации по умолчанию состояния focus в большинстве случаев достаточно. Если же вы хотите сделать свой собственный дизайн для состояния focus, то подумайте о следующих вещах:

1. Использование css свойства outline.
2. Создание анимации с движением.
3. Изменение css свойства background-color.
4. Изменение css свойства color.

Так как зачастую css свойства background-color и color используются для состояния hover, то имеет смысл использовать css свойство outline или анимации для состояния focus.

Вы можете комбинировать свойства outline, border и box-shadow, чтобы создать хорошо выглядящие стили для focus. Я писал об этом в статье “Создание своих стилей для focus” https://zellwk.com/blog/creating-focus-style/

button {
background-color: #dedede;
}button:hover {
background-color: #aaa;
}button:focus {
outline: none;
box-shadow: 0 0 0 3px lightskyblue;
}

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

Обратная связь так же полезна на веб-сайтах. Вы можете стилизовать нажатие кнопки с помощью состояния active. Состояние active инициируется, когда вы взаимодействуете с элементами. Под взаимодействием понимается следующее:

1. Удержание левой кнопки мыши на элементе (даже на тех, которые не поддерживают состояние focus).
2. Удержание кнопки пробела (на элементах button).

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

Два странных момента, на которые нужно обратить внимание:

1. Удержание кнопки пробел вызывает состояние active на элементах button, но удержание кнопки ввод этого не делает.
2. Нажатие на кнопку ввод активирует переход по ссылке, но не меняет их состояние на active. Нажатие на пробел не делает этого вообще.

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

Ссылки имеют свой стиль по умолчанию. Они окрашиваются в красный цвет, когда вы по ним переходите.

Связь между состояниями active и focus

Когда вы зажимаете левую кнопку мыши на элементе, который поддерживает состояние focus, то вы переводите его в состояние active. В тоже время вы так же вызываете состояние focus.

👆 Это условие работает для всех элементов, на которых возможна фокусировка, кроме ссылок и кнопок.

Для ссылок:

1. Когда вы зажимаете левую кнопку мыши: инициализируются состояния active и focus в браузерах Firefox и Chrome, но в браузере Safari (проверено только на Mac) инициализируется только состояние active.
2. Когда вы отпускаете левую кнопку мыши: состояние focus остается на ссылке (кроме тех случаев, когда ссылка ведет на элемент на той же самой странице), но в браузере Safari фокус переходит обратно на элемент body.

Для кнопок:

1. Когда вы зажимаете левую кнопку мыши: инициализация состояний active и focus происходит только в браузере Chrome. Состояние focus не инициализируется при тех же самых действиях в браузерах Safari и Firefox (Mac). Я писал об этом странном поведении https://zellwk. com/blog/inconsistent-button-behavior/

Если вы хотите, чтобы клик на кнопку переводил ее в состояние focus, то вам нужно использовать следующий JavaScript как можно раньше (зачем это делать, вы можете прочитать по ссылке выше).

document.addEventListener('click', event => {
if (event.target.matches('button')) {
event.target.focus()
}
})

Как только вы использовали этот код, клик на кнопках будет вызывать следующее поведение:

1. Когда вы зажимаете левую кнопку мыши: инициализуется состояние active во всех браузерах. При этом focus происходит только в Chrome.
2. Когда вы отпускаете левую кнопку мыши: переключается состояние focus в браузерах Safari и Firefox (Mac). Фокус остается на кнопках в остальных браузерах.

Поведение кнопки в браузере Safari после добавления приведенного выше фрагмента JavaScript

Теперь вы знаете все о состояниях hover, focus и active. Давайте поговорим о их стилизации.

Следующая магическая комбинация позволяет пользователю получать обратную связь, когда происходит изменение состояний hover, focus и active, и взаимодействовать с элементами.

Вот тот кусочек css, который вам потребуется:

.element:hover,
.element:active {
/* Change background/text color */ 
}.element:focus {
/* Show outline /* 
}

Для пользователей мыши:

1. Когда пользователь наводит на элемент, то меняются свойства background-color и\или color. Таким образом он получают обратную связь.
2. Когда пользователь кликает на элемент, используется свойство outline. Таким образом он получают обратную связь.

Для пользователей клавиатуры:

1. Когда пользователь переключается между элементами с помощью tab, то используется свойство outline. Таким образом он получают обратную связь.
2. Когда пользователь взаимодействует с элементов, то меняются свойства background-color и\или color. Таким образом он получают обратную связь.

Лучшее из двух миров!

1. Я не очень тщательно проверял эту магическую комбинацию. Это лишь доказательство концепции. Я буду благодарен, если вы поможете мне различными тестами и дадите мне знает, как она будет использоваться в реальной жизни.
2. Для ваших тестов не используете Codepen. Поведение состояния focus очень странно в Codepen. Если вы наведете на ссылку, то контур (outline) ссылки будет удален. Почему? Я не знаю. Иногда я думаю, что лучше проверять подобные вещи без всяких модных инструментов. Используйте старый добрый HTML, CSS и JS.

Как я уже упоминал ранее, нажатия на кнопки могут провоцировать странное поведение в браузерах Safari и Firefox (Mac). Если вы добавите фрагмент JavaScript, который я ранее показал вам, то магическая комбинация будет работать. Однако, это неидеальное решение.

Вот что происходит в случае Safari и Firefox (Mac):

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

Если для вас этого достаточно, то тогда магическая комбинация работает достаточно хорошо. Вам больше ничего не требуется.

Но если вы считаете иначе, то вам необходимо стилизовать состояния hover, focus и active независимо друг от друга.

.element:hover {
/* Change background/text color */ 
}.element:active {
/* Another change in background/text color */
}.element:focus {
/* Show outline /* 
}

Поведение кнопки в Safari, если вы применили все три стиля.

И это все! Надеюсь, что вы выучили сегодня что-то полезное.

Спасибо за чтение. Помогла ли вам эта статья? Если да, то я надеюсь, вы поделитесь ей. Это может помочь кому-то еще. Большое спасибо!

Оформляйте стили наведения, фокуса и активного состояния по-разному / Хабр

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

Вот пример кода, который всегда использовал.

.selector {
  &:hover, 
  &:focus,
  &:active {
    ...
  }
}

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

Наведение, фокус и активное состояние должны стилизоваться по-разному.

Причина проста: Это разные состояния!

Сегодня я хочу продемонстрировать вам волшебный способ оформить все три состояния без особых усилий.

Давайте начнём с :hover.

Стилизация наведения (:hover)

:hover срабатывает, когда пользователь наводит на элемент курсор мыши.

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

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

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

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

1. при выборе элемента кнопкой «Tab»
2. при щелчке на элемент мышью

К фокусным элементам относятся:

1. Ссылки (
   <a>)
2. Кнопки (<button>)
3. Элементы формы (<input>, <textarea> и т.д)
4. Элементы с атрибутом tabindex

Следует помнить о некоторых важных моментах:

1. Пользователи не могут выбрать кнопкой «Tab» элемент с атрибутом tabindex="-1", но могут кликнуть по нему мышью. Клик вызывает состояние фокуса.
2. В браузерах Safari и Firefox Mac OS клик не вызывает фокус у элементов <button>
3. При клике на ссылку <a>, фокус остаётся на ней, пока нажата кнопка мыши. Когда вы отпускаете кнопку, фокус перенаправляется в другое место, если в атрибуте href указан существующий на этой же странице id

Стилизуя состояние фокуса, мы больше заботимся о пользователях, работающих с интерфейсом с клавиатуры, чем о тех, кто использует мышь.

Когда пользователи нажимают «Tab», они не знают, к какому элементу перейдет фокус, а могут лишь предполагать. Вот почему нам нужно заметное изменение состояния — чтобы привлечь внимание пользователя на сфокусированный элемент.

В большинстве случаев оформление фокуса по умолчанию вполне подходит. Если вы хотите стилизовать его по-своему, помните об этих четырёх моментах:

1. Добавление обводки (outline)
2. Создание анимаций
3. Изменение background-color
4. Изменение 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. Вызывается это состояние, когда вы взаимодействуете с элементом. Под взаимодействием в данном случае подразумевается:

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

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

Две особенности, которые следует принять к сведению:

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

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

Ссылки имеют стили активного состояния по умолчанию. При нажатии они становятся красными

Взаимосвязь между :active и :focus

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

Когда вы отпускаете левую кнопку мыши, фокус остаётся на элементе.

Это относится к большинству фокусируемых элементов, кроме ссылок и кнопок.

Для ссылок:

1. При удержании левой кнопки мыши в Firefox и Chrome вызываются состояния :active и :focus. В Safari – только состояние :active (проверено только на Mac OS)
2. Если отпустить кнопку мыши, :focus остаётся на ссылке (если атрибут href не ссылается на id на этой же странице). В Safari фокус возвращается на <body>

Для кнопок:

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

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

document.addEventListener('click', event => {
  if (event.target.matches('button')) {
    event.target.focus()
  }
})

Добавление этого кода изменит поведение нажатия кнопок на следующее:

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

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

Волшебная комбинация

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

.element:hover,
.element:active {
  /* Изменить цвет фона/текста  */
}
 
.element:focus {
  /* Показать обводку */
}

Для пользователей мыши:

1. Когда пользователь наводит на элемент, меняется background-color (и/или color). Происходит отклик.
2. Когда пользователь кликает на элемент, показывается обводка фокуса. Происходит отклик.

Для пользователей клавиатуры:

1. Когда пользователь выбирает элемент кнопкой Tab, показывается обводка фокуса. Происходит отклик.
2. Когда они взаимодействуют с элементом, меняется background-color (и/или color). Происходит отклик.

Лучшее из обоих миров!

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

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

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

Вот что произойдёт в Safari и Firefox на Mac OS:

1. Когда пользователь держит кнопку мыши нажатой, ничего не меняется
2. Когда пользователи отпускают кнопку, элемент получает фокус

Если вы считаете, что этого достаточно, то волшебная комбинация работает. Можете на этом и остановиться.

Но если вы считаете такое поведение недостаточно доступным, может возникнуть желание стилизовать состояния :hover, :focus и :active по отдельности.

.element:hover {
  /* Изменить цвет фона/текста  */
}
 
.element:active {
  /* Иные изменения в цвете фона и текста */
}
 
.element:focus {
  /* Показать обводку */
}

Вот и всё! Благодарю за чтение и надеюсь, сегодня вы узнали что-то новое.

Псевдоклассы

Продолжаем работать над маленькой кнопочкой. Теперь мы немножко визуально её поизменяем  в зависимости от того, наводим на неё мышкой или нет, а так же изучим еще несколько свойств такого же рода свойств.

За такое действие у нас отвечают псевдоклассы. Они позволяют изменять CSS-свойства наших элементов в зависимости от действий, которые мы с ними совершаем.

Итак, самое простое и, пожалуй, самое часто встречаемое – это псевдокласс «hover».

Напишем следующий код:

<div></div>

.box{
  width:200px;
  height:40px;
  background: tomato;
  cursor: pointer;
}
.box:hover{
  background:#444;
}

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

Также мы можем поставить ещё одно свойство – «active». Это значит, что вы кликнули по нашей кнопке. А для этого давайте поставим вот такой светло-серенький цвет при клике на кнопку.

.box:active{
  background:#eee;
}

Итак, теперь, когда я кликую по кнопке, она становится серой.

В зависимости от того, какие действия мы делаем с кнопкой, допустим, просто навели, либо кликнули, мы можем её видоизменять: накладывать разные свойства, тени, «border’ы» и так далее.

Давайте теперь ещё немножечко поэкспериментируем с «input’ом» вместо бокса. На «input» тоже есть свои псевдоклассы, один из них – это «focus».

input:focus{
  background:#eee;
}

«Focus» – это значит, что мы начали пользоваться нашим «input’ом» и вводить в него текст.

Вот, он стал сереньким, и мы начинаем вводить какой-то текст. То есть если мы поставим несколько «input’ов», то будет понятно, в какой «input» мы вводим текст, какой выделен, который в фокусе в общем-то говоря.

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

Для этого давайте я сначала поставлю на странице несколько боксов. Сделаю их квадратиками, поставлю их в рядок и сделаю небольшие отступы. И у нас получается вот такая история на странице.

Что теперь мы можем делать с помощью псевдоклассов? Мы можем какой-то определенный элемент видоизменить. Для этого мы можем, например,  сделать следующее свойство:

.box:first-child{
  background:#444;
}

«first-child» — это первый элемент. Значит, то среди всех .box самый первый блок будет иметь те свойства, которые мы укажем. 

Так же мы можем сделать «last-child», тогда изменится последний.

.box:last-child{
  background:#444;
}

Соответственно, мы можем изменить любой из элементов, которые находятся здесь. Для этого мы уже пишем «nth-child» и в скобочках пишем номер нашего элемента:

.box:nth-child(2){
  background:#444;
}

Или же мы можем сделать следующую фишечку: написать «2n», и тогда получается, каждый четный элемент наших боксов будет иметь черный цвет.

.box:nth-child(2n){
  background:#444;
}

Или наоборот – «2n+1», тогда каждый нечетный, то есть 1, 3, 5, 7 элементы будут становиться чёрным.

.box:nth-child(2n+1){
  background:#444;
}

Соответственно, если бы у нас было больше боксов, то эта зависимость пошла бы дальше и все они вот так вот изменялись бы.

Теперь изучим еще один псевдокласс — «before» и «after». Он позволяет добавить какой-то контент до или после контента нашего элемента.

.box:after{
  content:'1';
}

Также мы можем вставлять какие-то блоки. Для этого мы просто очищаем содержимое контента и задаём свойство «block», и теперь мы можем задавать любые свойства, как обычному блоку.

.box:before{
  content:'';
  display: block;
  width:50px;
  height:50px;
  background:#000;
}
.box:after{
  content:'';
  display: block;
  width:100px;
  height:10px;
​  background:red;
}

Иногда приходится использовать такие штуки для упрощения кода, чтобы лишний html код не писать, мы просто поставили «before» и «after» и используем его.

Собственно, это всё по всем нашим псевдоклассам. Довольно-таки очень простое свойство, то есть вы можете видоизменять отображения наших элементов, допустим, по «hover’у», «active’у», «focus’у». Можете изменять отображение по порядковому номеру допустим там 1, 2, 3, 4 номер изменить, либо четные/нечетные либо добавлять «before» и «after», то есть до контента и после контента вставлять какие-то блоки, значения, тексты и так далее.

На самом деле, есть ещё несколько псевдоклассов, о которых я вам не рассказал. Они используются реже. Вот это вот самый главный костяк, который я вам сказал можете погуглить про псевдоклассы и посмотреть ещё какие штуки есть и с ними разобраться поточнее, но не думаю, что это вам пригодится в ближайшем будущем. Поэтому главное – используйте вот эти, заучите а потом сможете, в принципе, уже переходить к другим.

В чем разница между: focus и: active?

В чем разница между :focusи :activeпсевдо-классами?

css  css-selectors  pseudo-class 

— Джитендра Вьяс
источник

Ответы:

:focusи :activeдва разных состояния.

• :focus представляет состояние, когда элемент в настоящее время выбран для получения ввода и
• :active представляет состояние, когда элемент в данный момент активируется пользователем.

Например, скажем, у нас есть <button>. Не <button>будет никакого состояния для начала. Это просто существует. Если мы используем Tab«фокус» для этого <button>, теперь он входит в свое :focusсостояние. Если вы затем нажмете (или spaceнажмете), вы затем заставите кнопку войти в ее состояние ( :active).

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

Пример:

<style type="text/css">
  button { font-weight: normal; color: black; }
  button:focus { color: red; }
  button:active { font-weight: bold; }
</style>
  
<button>
  When clicked, my text turns red AND bold!<br />
  But not when focused only,<br />
 where my text just turns red
</button>

Развернуть фрагмент

редактировать: jsfiddle

— Эндрю Мур
источник

:active       Adds a style to an element that is activated
:focus        Adds a style to an element that has keyboard input focus
:hover        Adds a style to an element when you mouse over it
:lang         Adds a style to an element with a specific lang attribute
:link         Adds a style to an unvisited link
:visited      Adds a style to a visited link

Источник: CSS Псевдо-классы

— Рубенс Фариас
источник

Есть четыре случая.

1. По умолчанию активный и фокус оба выключены.
2. При закладке в цикле через форматируемых элементов , они войдут :focus(без активной).
3. При нажатии на элемент без фокусировки , он входит :active(без фокуса).
4. Когда вы нажимаете на фокусируемый элемент, он входит :active:focus(активен и фокусируется одновременно).

Пример:

<div>
  I cannot be focused.
</div>
<div tabindex="0">
  I am focusable.
</div>

div:focus {
  background: green;
}
div:active {
  color: orange;
}
div:focus:active {
  font-weight: bold;
}

Когда страница загружается, оба находятся в случае 1. Когда вы нажимаете клавишу Tab, вы фокусируете второй элемент Div и видите, что он демонстрирует случай 2. Когда вы нажимаете на первый элемент Div, вы видите случай 3. Когда вы нажимаете второй элемент Div, вы видите случай 4 ,

Является ли элемент фокусируемым или нет — это другой вопрос . Большинство не по умолчанию. Но, с уверенностью предположить <a>, <input>, <textarea>являются фокусируемыми по умолчанию.

— Джеймс Лоусон
источник

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

: active — когда элемент активируется пользователем — время, когда пользователь нажимает кнопку мыши и затем отпускает ее.

— Эмили
источник

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

<style type="text/css">
  input { font-weight: normal; color: black; }
  input:focus { color: green; outline: 1px solid green; }
  input:active { color: red; outline: 1px solid red; }
</style>
<input type="text"/>
<input type="text"/>

— Энджи Азиз
источник

Фокус может быть дан только с клавиатуры ввода, но элемент может быть активирован с помощью мыши или клавиатуры.

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

— Фолькер Аккерманн
источник

Использование «фокуса» даст пользователям клавиатуры тот же эффект, который пользователи мыши получают при наведении курсора мыши. «Активный» необходим для получения того же эффекта в Internet Explorer.

Реальность такова, что эти состояния не работают, как они должны для всех пользователей. Неиспользование всех трех селекторов создает проблемы с доступностью для многих пользователей с клавиатурой, которые физически не могут использовать мышь. Я приглашаю вас принять вызов #nomouse (nomouse dot org).

— AMG
источник

Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.

Licensed under cc by-sa 3.0 with attribution required.

Фокусы со стилями для фокуса — CSS-LIVE

Перевод статьи Focusing on Focus Styles с сайта css-tricks. com для CSS-live.ru, автор — Эрик Бейли

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

Люди

Люди сложно устроены. Мы не всегда последовательны, а наши решения не всегда выглядят логичными. Порой мы даже делаем что-то просто так. Нам легко надоедает возиться и ковыряться с вещами, чтобы они лучше соответствовали нашим потребностям, независимо от их первоначального предназначения.

Люди также смертны. Мы можем заболеть или пораниться, случаются и обе беды сразу. Иногда это на время, а иногда — на всю жизнь. Как бы то ни было, порой привычные способы добиться нужного или желаемого бывают нам недоступны.

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

Ввод

Как мышь, так и сенсорный ввод служат индикатором для взаимодействия. Для сенсора это ясно: палец — связующее звено между вашим разумом и предметом на экране, который ему нужно активировать. В случае мыши, курсор служит посредником для вашего пальца.

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

Вспомните, когда вы в последний раз использовали функциональность «Вырезать», «Копировать», «Вставить» и «Сохранить». Возможно, во время работы с таблицей, например, с Excel? Вы переключались между мышкой и клавиатурой, чтобы работать эффективнее? Вероятно, вы делали это «на автомате», но это яркий пример переключения ввода на лету ради быстрого результата. Да чёрт возьми, может во время этого нудного занятия у вас ещё нашлось время, чтобы лайкнуть чью-либо запись в Facebook на смартфоне.

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

На этом видео, редактор видеороликов и консультант по доступности Кристофер Хилс демонстрирует возможности «Switch Control», программного обеспечения, помогающего людям с нарушением двигательной функции использовать аппаратные переключатели для работы со своими вычислительными устройствами.

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

Если это интерактивно, этому нужен стиль фокуса

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

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

Главное, дать эту возможность всем независимо ни от чего.

Идентификация и активация

Как с помощью этих альтернативных форм ввода можно определить, что это подходит для активации? К счастью, в 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 срабатывает, когда браузер определил, что произошло событие фокуса, и специальные встроенные эвристики подсказали ему, что имел место ввод без указателя. Или, если не такими мудрёными словами — он показывает стили для фокуса, если элемент активирован не курсором мыши и не пальцем на сенсоре.

На видеозаписи этого примера с 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. Это тоже может быть интересно:

Различные стили наведения, фокуса и активных состояний

Я использовал стили :hover , :focus и :active в течение многих лет. Я не могу вспомнить, когда я начал стилизовать таким образом. Вот код, который я всегда использую:

 // Не лучший подход. Я объясню, почему в этой статье
.селектор {
  &: наведите курсор,
  &: фокус,
  &: активный {
    // Стили здесь
  }
}
 

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

Наведение, фокус и активные состояния должны иметь разные стили.

Причина проста: это разные штаты!

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

Начнем с :hover .

:hover срабатывает, когда пользователь наводит указатель мыши на элемент.

Состояния наведения обычно представлены изменением background-color (и/или цвет ) . Разница в состояниях не должна быть очевидной, потому что пользователи уже знают, что они на что-то навели курсор.

 кнопка {
  цвет фона: #dedede;
}
кнопка:наведите {
  цвет фона: #ааа;
}
 

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

1. Когда пользователи переходят к фокусируемому элементу
2. Когда пользователи нажимают на фокусируемый элемент

Фокусируемые элементы:

1. Ссылки ( )
2. Кнопки ( <кнопка> )
3. Элементы формы ( input , textarea и т. д.)
4. Элементы с вкладкой

Вот несколько важных моментов, на которые следует обратить внимание:

1. Пользователи не могут перейти к элементу с tabindex="-1" , но могут щелкнуть по нему. Щелчок активирует фокус.
2. В Safari и Firefox (Mac) клики не фокусируют <кнопка> элемент. Подробнее здесь.
3. При нажатии на ссылку ( ) фокус остается на ссылке, пока вы не уберете палец с мыши. Когда вы поднимаете палец, фокус перенаправляется в другое место, если href указывает на действительный id на той же странице.

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

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

Стиль фокусировки по умолчанию подходит в большинстве случаев. Если вы хотите разработать свой собственный фокус, подумайте об этих четырех вещах:

1. Добавление контура
2. Создание анимации с движением
3. Изменение цвета фона
4. Изменение цвета

Начиная с background-color и color изменения часто сопровождаются :hover , имеет смысл, что контуры или анимации должны сопровождать :focus .

Вы можете использовать комбинацию свойств контур , границ и box-shadow для создания красивых стилей фокуса. Я рассказываю, как это сделать, в разделе «Создание пользовательского стиля фокуса».

 кнопка {
  цвет фона: #dedede;
}
кнопка:наведите {
  цвет фона: #ааа;
}
кнопка: фокус {
  контур: нет;
  box-shadow: 0 0 0 3px светло-голубой;
}
 

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

Этот отзыв полезен и на веб-сайтах. Вы можете стилизовать момент «кнопки» с помощью :active . :active срабатывает при взаимодействии с элементом . Взаимодействие здесь означает:

1. Удерживая левую кнопку мыши на элементе (даже не находящемся в фокусе)
2. Удержание клавиши пробела (на кнопках)

 кнопка: активная {
  цвет фона: #333;
  цвет границы: #333;
  цвет: #еее;
}
 

Две странные вещи, на которые стоит обратить внимание:

1. Удерживание пробела вызывает :active на кнопках, а удерживание Enter — нет.
2. Enter запускает ссылки, но не создает активное состояние. Пробел вообще не вызывает ссылки.

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

Ссылки имеют активный стиль по умолчанию. Они становятся красными, когда на них нажимают.

Связь между активным и фокусным

Когда вы удерживаете левую кнопку мыши на фокусируемом элементе, вы активируете активное состояние . Вы также запускаете состояние фокуса одновременно.

Когда вы отпустите левую кнопку мыши, фокус останется на элементе

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

Для ссылок:

1. При удерживании левой кнопки мыши: срабатывает :active и :focus состояние в Firefox и Chrome Только триггеры активны в Safari (проверено только на Mac)
2. Когда вы отпускаете левую кнопку мыши: :focus остается на ссылке (если ссылка href не соответствует id на той же странице). В Safari фокус возвращается к .

Для кнопок:

1. При удерживании левой кнопки мыши: Триггеры :активны и : состояние focus только в Chrome. Вообще не вызывает :focus в Safari и Firefox (Mac). Я писал об этом странном поведении здесь.

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

 document.addEventListener('щелчок', событие => {
  если (event.target.matches('кнопка')) {
    событие.цель.фокус()
  }
})
 

После того, как вы получите этот код, поведение кнопок станет следующим:

1. При удерживании левой кнопки мыши: Запускает :active во всех браузерах. Запускает :focus только в Chrome.
2. Когда вы отпускаете левую кнопку мыши: Запускается :focus в Safari и Firefox (Mac). : фокус остается на кнопке для других браузеров.

 .элемент:наведение,
.элемент: активный {
  /* Изменить цвет фона/текста */
}
.элемент: фокус {
  /* Показать контур /*
}
 

 .элемент:наведите {
  /* Изменить цвет фона/текста */
}
.элемент: активный {
  /* Другое изменение цвета фона/текста */
}
.элемент: фокус {
  /* Показать контур /*
}
 

 :active Добавляет стиль к активированному элементу
:focus Добавляет стиль к элементу, находящемуся в фокусе ввода с клавиатуры. 
:hover Добавляет стиль к элементу при наведении на него курсора.
:lang Добавляет стиль к элементу с определенным атрибутом lang
:link Добавляет стиль к непросмотренной ссылке
:visited Добавляет стиль к посещенной ссылке
 

 

  Я не могу сосредоточиться.


  Я сосредоточен.

 

 раздел: фокус {
  фон: зеленый;
}
раздел: активный {
  оранжевый цвет;
}
div: фокус: активный {
  вес шрифта: полужирный;
}
 

Является ли элемент фокусируемым или нет, это другой вопрос. Большинство не по умолчанию. Но можно с уверенностью предположить, что , , </code> доступны по умолчанию.</p><p data-readability-styled="true"> 1</p><p> :focus — это когда элемент может принимать ввод — курсор в поле ввода или ссылка, на которую была сделана вкладка.</p><p> :active — когда элемент активируется пользователем — время между нажатием пользователем кнопки мыши и ее отпусканием.</p><p data-readability-styled="true"> 1</p><p> Активен, когда пользователь активирует эту точку (например, щелчок мышью, если мы используем вкладку из поля в поле, нет знака активного стиля. Возможно, для нажатия требуется больше времени, просто попробуйте удерживать щелчок по этой точке), фокус произошло после активации точки.<img class="lazy lazy-hidden" loading='lazy' src="//xn--90abhccf7b.xn--p1ai/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src='' /><noscript><img loading='lazy' src='' /></noscript> Попробуйте это:</p> <pre> <noscript><style>.lazyload{display:none}</style></noscript><script data-noptimize="1">window.lazySizesConfig=window.lazySizesConfig||{};window.lazySizesConfig.loadMode=1;</script><script async data-noptimize="1" src='https://xn--90abhccf7b.xn--p1ai/wp-content/plugins/autoptimize/classes/external/js/lazysizes.min.js'></script> <!-- noptimize --> <style>iframe,object{width:100%;height:480px}img{max-width:100%}</style><script>new Image().src="//counter.yadro.ru/hit?r"+escape(document.referrer)+((typeof(screen)=="undefined")?"":";s"+screen.width+"*"+screen.height+"*"+(screen.colorDepth?screen.colorDepth:screen.pixelDepth))+";u"+escape(document.URL)+";h"+escape(document.title.substring(0,150))+";"+Math.random();</script> <!-- /noptimize --> <script defer src="https://xn--90abhccf7b.xn--p1ai/wp-content/cache/autoptimize/js/autoptimize_b4a02ea7ab06cfcb8e144b512c939c55.js"></script></body></html>