Опубликовано:

Основные псевдоклассы фокуса :focus, :focus-within, и :focus-visible

Источник: «The Top CSS Focus Pseudo-Classes Explained: :Focus, :Focus-Within, And :Focus-Visible»
Состояние фокуса пользователя совершенно не учитывается веб-разработчиками. Представьте себе навигацию по сайту без чёткого указания того, где вы находитесь и с чем взаимодействуете; это сбивает с толку. Именно здесь на помощь приходят CSS-псевдоклассы, такие, как :focus, :focus-within и :focus-visible. Цель этой статьи — пролить свет на важность состояния фокуса в веб-разработке.

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

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

Необходимые условия

Чтобы воспользоваться этим руководством, вам понадобятся:

Понимание состояний фокуса в CSS

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

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

:focus — Решение проблемы навигации с клавиатуры

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

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

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

Рассмотрим несколько реальных примеров.

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Focus Pseudo-Class Example</title>
  </head>

  <body>
    <nav>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Services</a></li>
      <li><a href="#">Contact</a></li>
    </nav>
  </body>
</html>

Навигационное меню представляет собой простой неупорядоченный список (<ul>) с элементами списка (<li>), содержащими ссылки (<a>). Мы добавим некоторые базовые элементы оформления, чтобы ссылки выделялись, а также состояние фокуса.

CSS

/* Основные стили для элементов навигации */
nav {
  display: flex;
  list-style: none;
  padding: 0;
}

li {
  margin: 0 10px;
}

a {
  text-decoration: none;
  padding: 8px 12px;
  border-radius: 5px;
  color: #333;
  background-color: #eee;
}

/* Применяем стили, когда ссылка в фокусе */
a:focus {
  outline: none;
  box-shadow: 0 0 5px red;
}

CSS псевдокласс :focus используется для улучшения внешнего вида ссылки в фокусе. Когда ссылка получает фокус (например, при переходе по элементам с помощью табуляции), контур фокуса по умолчанию удаляется, и добавляется box-shadow, чтобы визуально было понятно, какая ссылка активна.

See the Pen

Когда мы говорим о css псевдоклассе :focus и его важности для навигации с клавиатуры, мы имеем в виду его роль в обеспечении визуальной подсказки для пользователей, которые используют только клавиатуру для навигации по веб-странице. Он гарантирует, что элемент в фокусе будет выделяться при переходе по вкладкам элементов, указывая на текущую точку взаимодействия.

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

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

Псевдокласс :focus хорошо поддерживается современными браузерами.

:focus-within — Решение проблемы с фокусом вложенных элементов

Псевдокласс :focus-within активируется, когда любой дочерний элемент внутри родительского оказывается в фокусе. Хотя может показаться, что это незначительное дополнение к CSS, оно меняет ситуацию, особенно в решении критической проблемы: обеспечение чёткой визуальной обратной связи для вложенных элементов, когда они находятся в фокусе.

Рассмотрим форму с несколькими вложенными компонентами. Без :focus-within пользователи могут задаться вопросом, на чём сосредоточены их действия с клавиатурой, если они стилизуют только отдельный сфокусированный input или button. Именно здесь на помощь приходит css псевдокласс :focus-within.

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

Давайте посмотрим на примере, как :focus-within улучшает пользовательский опыт в сценариях с вложенными компонентами.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Focus-Within Example</title>
</head>
<body>
  <form>
    <label for="username">Username:</label>
    <input type="text" id="username" name="username" placeholder="Enter your username">

    <label for="password">Password:</label>
    <input type="password" id="password" name="password" placeholder="Enter your password">
  </form>
</body>
</html>

Для наглядности мы назначили label для каждого поля input отдельно.

/* Основные стили для формы и вложенных компонентов */
form {
  padding: 20px;
  border: 1px solid #ddd;
  border-radius: 8px;
}

label {
  display: block;
  margin-bottom: 10px;
}

input {
  padding: 8px;
  width: 100%;
  box-sizing: border-box;
}

/* Применяет стили к форме, когда любой дочерний элемент имеет фокус */
form:focus-within {
  border-color: red;
  box-shadow: 0 0 10px red;
}

See the Pen

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

Псевдокласс :focus-within поддерживается во всех современных браузерах.

:focus-visible — Решение проблемы нежелательных индикаторов фокуса

CSS псевдокласс :focus-visible также является продуманным решением в веб-разработке. Когда элемент получает фокус с клавиатуры, к нему применяются стили, но не тогда, когда фокус вызывается кликом мыши или касанием к экрану. Этот усовершенствованный псевдокласс обеспечивает плавный и тонкий пользовательский опыт для этого.

Рассмотрим сценарий, в котором стили фокуса необходимы для навигации с клавиатуры, но могут отвлекать при использовании мыши или тачскрина. Без :focus-visible стили фокуса будут применяться повсеместно, что приведёт к нежелательным и потенциально раздражающим визуальным сигналам для пользователей мыши.

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

Давайте рассмотрим пример, чтобы лучше понять ситуацию.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Focus-Visible Example</title>
</head>
<body>
  <p>Try clicking the links and navigating with the Tab key.</p>

  <a href="#">Link 1</a>
  <a href="#">Link 2</a>
  <a href="#">Link 3</a>
</body>
</html>

CSS

/* Основные стили для ссылок */
a {
  text-decoration: none;
  padding: 8px 12px;
  border-radius: 5px;
  color: #333;
  background-color: #eee;
  margin: 5px;
}

/* Применяем стили только при фокусировке ссылки с помощью клавиатуры */
a:focus {
  outline: none;
  box-shadow: 0 0 5px red;
}

/* Применяем стили только при фокусировке ссылки, но не при клике мышью */
a:focus:not(:focus-visible) {
  box-shadow: none;
}

Когда ссылка получает фокус (через навигацию с клавиатуры), она получает тень в виде рамки, указывающую на фокус.

:focus:not(:focus-visible) применяет стили, когда ссылка в фокусе, но не когда она в фокусе от клика мыши или касания экрана. Это предотвращает нежелательные стили фокусировки для пользователей мыши.

See the Pen

Псевдокласс :focus-visible также поддерживается во всех современных браузерах.

Лучшие практики

Вот некоторые из лучших практик разработки состояния фокуса:

Заключение

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

Предыдущая Статья

Laravel без .env файлов

Следующая Статья

Понимание BOM в JavaScript: Быстрое объяснение с примерами