focus-visible
- 21 июня 2025
Когда мы создаём сайты, мы хотим, чтобы ими было удобно пользоваться всем людям — и тем, кто управляет страницей с помощью мыши, и тем, кто использует клавиатуру. Например, человек с ограниченными возможностями зрения может перемещаться по элементам с помощью клавиши Tab.
Браузеры по умолчанию показывают рамку (outline) вокруг элемента, когда он получает фокус — например, при клике мышкой или при перемещении с помощью клавиатуры. Эта рамка помогает понять, какой элемент активный.
Но бывает так, что рамка появляется даже тогда, когда она не нужна. Например, Вы кликнули мышкой по кнопке, и вокруг неё появилась рамка — выглядит не очень красиво, а пользы от неё нет, потому что курсор мыши уже показывает, куда мы кликнули.
Тут и помогает :focus-visible. Этот псевдокласс позволяет показывать рамку только в тех случаях, когда это действительно полезно — обычно при навигации с клавиатуры.
Чем: focus-visible лучше просто: focus
Если использовать только :focus, то стили срабатывают всегда, когда элемент получает фокус — хоть с мыши, хоть с клавиатуры. Это может раздражать:
button:focus {
outline: 2px solid blue;
}
Если кликнуть мышкой по кнопке, вокруг неё появится синяя рамка.
А с :focus-visible рамка будет появляться только при фокусе с клавиатуры:
button:focus-visible {
outline: 2px solid blue;
}
Так мы делаем интерфейс чище и удобнее для всех.
Как использовать на практике
Давайте посмотрим простой пример. Представьте форму с полями ввода и кнопкой:
<form>
<input type="text" placeholder="Ваше имя">
<input type="email" placeholder="Ваш e-mail">
<button type="submit">Отправить</button>
</form>
Добавим стили:
input:focus-visible,
button:focus-visible {
outline: 3px solid #007acc;
}
input:focus,
button:focus {
outline: none;
}
Что тут происходит?
- Когда элемент получает фокус с клавиатуры, срабатывает
:focus-visible, и появляется синяя рамка. - Когда элемент получает фокус с мыши, срабатывает
:focus, но рамку мы убираем, потому чтоoutline: none;.
Итог: для тех, кто пользуется клавиатурой, подсветка есть — удобно. Для тех, кто кликает мышкой, лишнего визуального шума нет.
Почему это хорошо и правильно
Использование :focus-visible делает сайт:
- доступным — люди с ограничениями здоровья могут удобно перемещаться по интерфейсу;
- аккуратным — рамка появляется только тогда, когда это нужно;
- современным — поддержка псевдокласса есть во всех актуальных браузерах (кроме очень старых версий).
Советы по применению
Всегда тестируйте фокус с клавиатуры — нажимайте Tab, чтобы убедиться, что активный элемент виден.
Не убирайте рамку совсем, если не добавляете альтернативный стиль — это ухудшает доступность.
Можно комбинировать с другими псевдоклассами, например :hover, чтобы добиться идеального внешнего вида.
Полный пример
Вот рабочий пример кода, который можно использовать как основу в своих проектах:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Пример с :focus-visible</title>
<style>
button,
input {
padding: 8px 12px;
font-size: 16px;
margin-bottom: 10px;
display: block;
}
input:focus {
outline: none;
}
button:focus {
outline: none;
}
input:focus-visible,
button:focus-visible {
outline: 3px solid #007acc;
}
</style>
</head>
<body>
<form>
<input type="text" placeholder="Ваше имя">
<input type="email" placeholder="Ваш e-mail">
<button type="submit">Отправить</button>
</form>
</body>
</html>
Попробуйте открыть этот код в браузере и понажимать Tab. Вы увидите, что рамка появляется только при навигации с клавиатуры, а при кликах мышкой её нет.
Заключение
:focus-visible — это современный инструмент для улучшения доступности и внешнего вида сайта. Он позволяет показывать фокус там, где это действительно нужно, и не отвлекать пользователя там, где это лишнее.
Используйте :focus-visible в своих проектах — это хороший тон и забота о пользователях.
«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.
Читать дальше
Псевдоклассы валидации форм: делаем интерфейсы понятнее
Когда вы создаёте веб-форму, важно, чтобы пользователь сразу понимал, правильно ли он заполнил поля. Здесь на помощь приходят псевдоклассы :valid и :invalid. Эти инструменты, доступные в браузерах с 2018 года (согласно Baseline, статус «Widely Available»), позволяют стилизовать элементы формы в зависимости от того, проходят ли они валидацию. Представьте: пользователь вводит email, а поле подсвечивается зелёным, если всё верно, или красным, если что-то пошло не так. Это не только удобно, но и делает интерфейс интуитивно понятным даже для новичков.
Кроме того, существуют псевдоклассы :required и :optional. Они помогают визуально выделить обязательные и необязательные поля. Например, можно добавить звёздочку или изменить цвет границы для обязательных полей, чтобы пользователь сразу знал, что их нужно заполнить.
- 15 августа 2025
Как сделать первую букву абзаца большой — буквица через ::first-letter
Если сегодня мы воспринимаем веб как что-то само собой разумеющееся, то в начале 90-х годов страницы выглядели очень аскетично: просто текст, иногда ссылки, никаких визуальных изысков. Когда появился CSS, разработчики впервые получили возможность влиять на то, как отображается текст. Одной из первых «красивых» фич стал псевдоэлемент ::first-letter, появившийся ещё в спецификации CSS1 в 1996 году.
Идея была проста: дать возможность стилизовать первую букву абзаца или блока текста. В печатных книгах и журналах такой приём назывался «буквица» и использовался сотни лет, чтобы вовлечь читателя в текст. Авторы CSS вдохновились именно этим приёмом, чтобы приблизить веб к традиционной типографике.
- 12 августа 2025
Лигатуры в CSS: как сделать текст аккуратнее
Если вы когда-нибудь присматривались к сочетаниям букв вроде «fi» или «fl» в хороших шрифтах, то, возможно, замечали,
что они выглядят чуть иначе, чем при простом наборе. Буквы как будто «срастаются» в один знак, чтобы хвостики и точки
не мешали друг другу. Это и есть лигатуры — особые глифы, которые шрифтовые дизайнеры создают для улучшения читаемости
и эстетики текста. В вебе ими управляет свойство font-variant-ligatures.
Лигатуры пришли к нам из полиграфии: ещё в эпоху ручного набора наборщики заменяли конфликтующие буквы на слитные формы, чтобы набор выглядел аккуратнее. Сегодня это реализуется средствами OpenType, а браузеры, если шрифт поддерживает лигатуры, могут автоматически подставлять нужный глиф вместо пары букв.
Для фронтенд-разработчика важно знать, что лигатуры меняют только вид текста, но не его содержимое в DOM. Поиск, копирование, скрин-ридеры — всё продолжает работать корректно, ведь под капотом там по-прежнему две буквы, а не одна.
CSS-селекторы. Шпаргалка для новичков
Селекторы — это шаблоны, которые используются для привязки стилевых свойств к элементам в документе. Вы можете задать стиль для всех элементов или сократить выбор с помощью определённого селектора.
- 8 августа 2025
CSS-градиенты в oklch
Градиент — это плавный переход между двумя или более цветами, создаваемый с помощью функций
linear-gradient() или radial-gradient(). Его используют в вебе для фонов, кнопок,
рамок, декоративных элементов и даже в интерактивных эффектах при наведении.
Классические градиенты в CSS описываются в sRGB — привычном цветовом пространстве браузеров. Но у sRGB есть ограничения: некоторые переходы выглядят тусклыми или неравномерными, особенно если использовать яркие и сложные оттенки.
Чтобы добиться более естественного восприятия цвета, в CSS можно использовать современные цветовые модели, например oklch.
Эта модель разработана с учётом особенностей человеческого зрения: яркость, насыщенность и оттенок регулируются отдельно, а сами переходы кажутся глазу равномерными.
- 8 августа 2025
CSS :has() — проверка наличия потомков или соседних элементов
Представьте селектор, который выбирает элемент не по его собственным классам, а по тому, что происходит внутри него или рядом с ним.
Так работает псевдокласс :has(): он позволяет применить стили к родителю (или соседу), если в нужном контексте нашёлся подходящий элемент.
В результате — меньше вспомогательных классов, меньше JavaScript для «протаскивания» состояний наверх, и чище разметка.
- 6 августа 2025
Функция image() в CSS: цветовые плашки, вырезки из спрайтов и bidi-изображения
Функция image() из модуля CSS Images Level 4 — это «умная» альтернатива url(), которая умеет больше: задавать
направленность изображения (для языков слева-направо и справа-налево), вырезать фрагмент по медиасегменту #xywh и даже
рисовать однотонную плашку как самостоятельный слой изображения. Звучит как швейцарский нож для бэкграундов — и так и есть.
Но есть важная оговорка: на сегодня поддержка в браузерах минимальна, поэтому ниже мы покажем, как писать код «по-новому»
и какие фолбэки использовать уже сейчас.
- 5 августа 2025
Всё самое важное о псевдоклассе :default
Псевдокласс :default — это способ стилизации элемента формы, выбранного по умолчанию. Он особенно полезен при работе с группами радиокнопок, чекбоксов или выпадающих списков, где важно визуально выделить стартовый (предустановленный) вариант. Такой подход делает интерфейс понятнее и помогает пользователю быстрее ориентироваться в выборе.
Доступно в Baseline в статусе «Widely Available» с 2022-07-15
- 4 августа 2025
Как работает единица измерения em в CSS
Единица em используется в CSS для задания относительных размеров, которые зависят от шрифта родительского или текущего элемента. Это делает верстку гибкой и адаптивной: если пользователь увеличит базовый размер текста, элементы тоже изменятся.
Доступно в Baseline в статусе «Widely Available» с 2018-01-29
- 30 июля 2025
Как найти пустые элементы в CSS
Псевдокласс :empty помогает находить пустые HTML-элементы, чтобы применять к ним стили или скрывать их. Это удобно для автоматической очистки интерфейса и улучшения UX без дополнительных классов или JavaScript.
- 29 июля 2025