Стиль наведения, фокуса и активных состояний по-разному

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

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

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

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

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

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

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

Стилизация состояний наведения

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

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

button {
  background-color: #dedede;
}

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

Стилизация состояний фокуса

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

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

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

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

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

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

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

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

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

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

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

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

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 на кнопках, а удерживание Enter — нет.
2. Enter запускает ссылки, но не создает активное состояние. Пробел вообще не вызывает ссылки.

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

Отношения между активным и сосредоточенным

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

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

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

Для ссылок:

1. Когда вы удерживаете левую кнопку мыши: Триггеры :active а также :focus состояние в Firefox и Chrome Только триггеры активны в Safari (проверено только на Mac)
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 только в Хроме.
2. Когда вы отпускаете левую кнопку мыши: Триггеры :focus в Safari и Firefox (Mac). :focus остается на кнопке для других браузеров.
   Поведение кнопки в Safari после добавления приведенного выше фрагмента кода JavaScript.

Теперь, когда вы знаете о наведении, фокусе и активных состояниях, я хочу поговорить о стилях для всех трех.

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

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

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

.element:focus {
  /* Show outline /* 
}

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

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

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

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

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

1. Я не проверял волшебную комбинацию полностью. Это доказательство концепции. Я был бы признателен, если бы вы помогли мне с некоторыми тестами и дайте мне знать, как это поживает.
2. Если вы запускаете тесты, не используйте Codepen. Странные состояния фокуса для ссылок на Codepen. Если вы наведете курсор на ссылку, контур фокуса исчезнет. Почему? Я не знаю. Иногда я думаю, что лучше всего тестировать такие вещи без каких-либо причудливых инструментов. Просто старый 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, если вы стилизовали все три состояния.

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

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