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

Введение в CSS псевдокласс :focus-visible

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

Тем не менее, несмотря на свою полезность, :focus-visible не работает в ряде старых и популярных браузеров, что создает проблемы с кроссбраузерной совместимостью.

Как работает :focus-visible и почему он важен

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

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

button:focus-visible {
outline: 2px solid blue;
}

В этом примере кнопка будет выделяться синим контуром только если фокус был установлен клавиатурой.

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

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

Текущая поддержка по данным на 2024 год

Как видно из таблицы, «старые» браузеры вроде Internet Explorer и ранние версии популярных браузеров не поддерживают :focus-visible. На практике это значит, что для пользователей, работающих на таких браузерах, стили, которые ориентированы на :focus-visible, не будут применяться.

Основные причины отсутствия поддержки :focus-visible в старых браузерах

• Устаревшая реализация CSS-движка: Сложности внедрения новых псевдоклассов требуют обновления движка, чего не происходит в устаревших браузерах.
• Низкий приоритет развития: Многие старые браузеры, такие как Internet Explorer, перестали получать основные обновления и новые функции.
• Отсутствие стандартизации на момент релиза браузера: :focus-visible стал стандартом только в последние годы, поэтому ранние версии браузеров не могут его «понять».
• Технические ограничения: Работа :focus-visible требует интерактивной логики по определению типа фокуса (клавиатура, мышь и др.), что добавляет сложности для реализации в рендеринг движках.

Пояснение по техническим аспектам

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

Как обеспечить кроссбраузерную поддержку: решения и советы

С учетом распространенности старых браузеров, особенно в корпоративной среде, важно применять подходы, которые компенсируют отсутствие поддержки :focus-visible.

Использование полифиллов

Одним из наиболее эффективных способов является подключение JavaScript-полифилла, который имитирует поведение :focus-visible.

• Полифилл отслеживает фокус и взаимодействие пользователя и динамически добавляет класс .focus-visible на элемент.
• Далее в CSS вместо :focus-visible можно использовать .focus-visible класс.

Это гарантирует, что даже в старых браузерах будет работать необходимая стилизация.

Пример кода с использованием полифилла

// JS-полифилл (упрощенный пример)
document.body.addEventListener(‘keydown’, e => {
if (e.key === ‘Tab’) {
document.body.classList.add(‘user-is-tabbing’);
}
});

document.body.addEventListener(‘mousedown’, e => {
document.body.classList.remove(‘user-is-tabbing’);
});

/* CSS */
button:focus {
outline: none;
}

.user-is-tabbing button:focus {
outline: 2px solid blue;
}

Другие рекомендации

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

Статистика использования устаревших браузеров

Согласно статистике на 2024 год, доля пользователей Internet Explorer и ранних версий браузеров часто превышает 5% в ряде стран и корпоративных средах. Это значительная аудитория, которая может столкнуться с проблемами из-за отсутствия поддержки :focus-visible.

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

Заключение

CSS псевдокласс :focus-visible — значимый инструмент для улучшения пользовательского опыта и доступности веб-интерфейсов. Его поддержка в современных браузерах уже достаточно хороша, но старые версии и устаревшие браузеры, такие как Internet Explorer и ранние релизы Chrome, Firefox, Safari, не поддерживают этот псевдокласс.

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

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

Авторский совет: «Оптимальное решение — комбинировать :focus-visible с классическим :focus и использовать полифиллы, чтобы обеспечить доступность для максимального числа пользователей, включая тех, кто пользуется старыми браузерами.»

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