логотип PurpleSchool
Иконка входа
Вход
логотип PurpleSchool
Главная
База знаний
Псевдокласс focus-visible в CSS. Полное руководство с примерами

Псевдокласс focus-visible в CSS. Полное руководство с примерами

04 октября 2024 г.
Автор

Дмитрий Нечаев

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

Что такое псевдокласс :focus-visible?

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

Пример базового использования :focus-visible:

selector:focus-visible {
  /* Стили для элемента в фокусе, когда это необходимо */
}

Пример использования псевдокласса :focus-visible для поля ввода:

input:focus-visible {
  border-color: blue;
}

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

Примеры использования псевдокласса :focus-visible

Основные примеры

Изменение цвета границы при фокусе через клавиатуру

Пример:

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    input:focus-visible {
      border-color: blue; /* Изменение цвета границы при фокусе через клавиатуру */
    }
  </style>
  <title>Изменение цвета границы при фокусе через клавиатуру</title>
</head>
<body>
  <input type="text" placeholder="Нажмите Tab, чтобы перейти к этому полю">
</body>
</html>

Изменение фона при фокусе через клавиатуру

Пример:

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    textarea:focus-visible {
      background-color: lightyellow; /* Изменение фона при фокусе через клавиатуру */
    }
  </style>
  <title>Изменение фона при фокусе через клавиатуру</title>
</head>
<body>
  <textarea rows="4" cols="50" placeholder="Нажмите Tab, чтобы перейти к этому полю"></textarea>
</body>
</html>

Изменение цвета текста при фокусе через клавиатуру

Пример:

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    button:focus-visible {
      color: red; /* Изменение цвета текста при фокусе через клавиатуру */
    }
  </style>
  <title>Изменение цвета текста при фокусе через клавиатуру</title>
</head>
<body>
  <button>Нажмите Tab, чтобы перейти к этой кнопке</button>
</body>
</html>

Сложные примеры

Анимация при фокусе через клавиатуру

Псевдокласс :focus-visible можно использовать для создания анимаций при фокусе через клавиатуру.

Пример:

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    .box {
      width: 100px;
      height: 100px;
      background-color: blue;
      transition: transform 0.3s ease; /* Плавный переход */
    }

    .box:focus-visible {
      transform: scale(1.2); /* Увеличение размера при фокусе через клавиатуру */
    }
  </style>
  <title>Анимация при фокусе через клавиатуру</title>
</head>
<body>
  <div class="box" tabindex="0"></div> <!-- tabindex="0" позволяет элементу получать фокус -->
</body>
</html>

Изменение стилей кнопки при фокусе через клавиатуру

Пример:

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    .button {
      background-color: #007bff;
      color: white;
      padding: 10px 20px;
      border: none;
      cursor: pointer;
      transition: background-color 0.3s;
    }

    .button:focus-visible {
      background-color: #0056b3; /* Изменение фона кнопки при фокусе через клавиатуру */
    }
  </style>
  <title>Изменение стилей кнопки при фокусе через клавиатуру</title>
</head>
<body>
  <button class="button">Нажмите Tab, чтобы перейти к этой кнопке</button>
</body>
</html>

Комбинирование с другими псевдоклассами и псевдоэлементами

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

Комбинирование с псевдоклассом :hover

Пример:

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    .link {
      color: #007bff;
      text-decoration: none;
      padding: 5px 10px;
      display: inline-block;
      transition: background-color 0.3s, color 0.3s;
    }

    .link:hover,
    .link:focus-visible {
      background-color: #e2e6ea;
      color: #0056b3;
    }
  </style>
  <title>Комбинирование с :hover и :focus-visible</title>
</head>
<body>
  <a href="#" class="link">Наведите или нажмите Tab, чтобы перейти к ссылке</a>
</body>
</html>

Комбинирование с псевдоэлементами :before и :after

Пример:

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    .button-effect {
      position: relative;
      padding: 10px 20px;
      background-color: #007bff;
      color: white;
      border: none;
      cursor: pointer;
      overflow: hidden;
      transition: background-color 0.3s;
    }

    .button-effect:before,
    .button-effect:after {
      content: "";
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      background: rgba(255, 255, 255, 0.2);
      transition: transform 0.3s;
    }

    .button-effect:before {
      transform: scaleX(0);
      transform-origin: left;
    }

    .button-effect:after {
      transform: scaleX(0);
      transform-origin: right;
    }

    .button-effect:hover:before,
    .button-effect:hover:after,
    .button-effect:focus-visible:before,
    .button-effect:focus-visible:after {
      transform: scaleX(1);
    }

    .button-effect:focus-visible {
      background-color: #0056b3;
    }
  </style>
  <title>Комбинирование с псевдоэлементами</title>
</head>
<body>
  <button class="button-effect">Нажмите Tab или наведите курсор на кнопку</button>
</body>
</html>

Примеры использования в реальных проектах

Стилизация форм

Использование псевдокласса :focus-visible для стилизации полей ввода в форме:

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    form {
      max-width: 400px;

      margin: 20px auto;
      padding: 20px;
      border: 1px solid #ccc;
      border-radius: 5px;
    }

    input, textarea {
      width: 100%;
      padding: 10px;
      margin-bottom: 10px;
      border: 1px solid #ccc;
      border-radius: 3px;
      transition: border-color 0.3s;
    }

    input:focus-visible, textarea:focus-visible {
      border-color: #007bff; /* Изменение цвета границы при фокусе через клавиатуру */
    }
  </style>
  <title>Стилизация форм</title>
</head>
<body>
  <form>
    <label for="name">Имя:</label>
    <input type="text" id="name" name="name" required>

    <label for="email">Email:</label>
    <input type="email" id="email" name="email" required>

    <label for="message">Сообщение:</label>
    <textarea id="message" name="message" rows="5" required></textarea>

    <button type="submit">Отправить</button>
  </form>
</body>
</html>

Стилизация навигационного меню

Использование псевдокласса :focus-visible для стилизации ссылок в навигационном меню:

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    nav a {
      color: #007bff;
      text-decoration: none;
      padding: 10px;
      display: inline-block;
      transition: background-color 0.3s, color 0.3s;
    }

    nav a:hover,
    nav a:focus-visible {
      background-color: #e2e6ea;
      color: #0056b3;
    }
  </style>
  <title>Навигационное меню</title>
</head>
<body>
  <nav>
    <a href="#">Главная</a>
    <a href="#">О нас</a>
    <a href="#">Контакты</a>
  </nav>
</body>
</html>

Заключение

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

Карта развития разработчика

Получите полную карту развития разработчика по всем направлениям: frontend, backend, devops, mobile