Что такое tap highlight color и почему появляется синяя подсветка
При разработке мобильных интерфейсов многие сталкиваются с характерным эффектом: при нажатии на кнопку, ссылку или любой интерактивный элемент на сенсорном экране появляется синяя или серая полупрозрачная подсветка. Этот эффект реализован браузерами на основе WebKit — Safari на iOS и Chrome на Android — как визуальная обратная связь для пользователя, подтверждающая касание экрана.
Технически это поведение управляется CSS-свойством -webkit-tap-highlight-color. По умолчанию браузеры устанавливают для него полупрозрачный синий или серый цвет. Для большинства корпоративных и кастомных интерфейсов такое поведение нежелательно: оно конфликтует с дизайн-системой, выглядит неаккуратно и создаёт ощущение «не доделанного» продукта.
CSS-свойство -webkit-tap-highlight-color
Свойство -webkit-tap-highlight-color — нестандартное расширение WebKit, которое управляет цветом подсветки при тапе. Оно принимает любое допустимое CSS-значение цвета, включая transparent.
Чтобы полностью убрать синюю подсветку кнопок CSS на мобильном, достаточно одного правила:
|
1 2 3 |
* { -webkit-tap-highlight-color: transparent; } |
Звёздочка (*) применяет правило ко всем элементам на странице. Это наиболее простой и надёжный способ отключить подсветку глобально.
Глобальное отключение для всех элементов
Рекомендуется добавлять это правило в начало вашего основного CSS-файла или в блок глобальных сбросов (reset/normalize). Типичный пример глобального сброса с отключением подсветки:
|
1 2 3 4 5 6 7 |
*, *::before, *::after { box-sizing: border-box; -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; } |
Здесь также добавлено свойство -webkit-touch-callout: none, которое отключает всплывающее меню при долгом нажатии на элемент (актуально для iOS). Это полезно для кнопок с иконками и изображений, на которые не нужно давать возможность сохранять через контекстное меню.
Отключение только для кнопок и ссылок
Если вы не хотите трогать все элементы страницы, можно применить свойство точечно — только к интерактивным элементам:
|
1 2 3 4 5 6 7 8 9 10 11 |
a, button, input[type="button"], input[type="submit"], input[type="reset"], label, select, .btn { -webkit-tap-highlight-color: transparent; outline: none; } |
Такой подход более аккуратный и не затрагивает текстовые блоки, параграфы и другие неинтерактивные элементы.
Поддержка браузеров
Свойство -webkit-tap-highlight-color поддерживается следующими браузерами:
- Safari на iOS — полная поддержка начиная с ранних версий
- Chrome на Android — поддерживается через WebKit/Blink-движок
- Samsung Internet — поддерживается
- Firefox на Android — не поддерживает это свойство, но и собственной подсветки не добавляет
- Desktop-браузеры — свойство игнорируется, не влияет на поведение
Несмотря на то что свойство нестандартное (с префиксом -webkit-), оно де-факто стало стандартом де для мобильной веб-разработки и поддерживается всеми актуальными мобильными браузерами на базе WebKit и Blink.
Свойство outline: none
Дополнительно к отключению tap highlight стоит упомянуть свойство outline: none. Оно убирает контурную рамку, которую браузеры добавляют к элементам в фокусе (в том числе после тапа на мобильных устройствах):
|
1 2 3 4 5 6 7 8 9 10 11 |
button:focus, a:focus, input:focus { outline: none; } button:focus-visible, a:focus-visible, input:focus-visible { outline: 2px solid #0066cc; } |
Обратите внимание: полностью убирать outline без альтернативы нежелательно. Используйте псевдокласс :focus-visible — он применяет стиль фокуса только когда пользователь использует клавиатуру, но не при клике мышью или тапе. Это современный и доступный подход.
Когда стоит сохранить подсветку (accessibility)
Несмотря на то что синяя подсветка часто мешает дизайну, её полное отключение без замены негативно сказывается на доступности интерфейса. Рекомендации по доступности WCAG требуют, чтобы пользователь всегда мог определить, какой элемент находится в фокусе.
Если вы убираете стандартную подсветку, обязательно реализуйте собственную визуальную обратную связь:
- Добавьте :active состояние с изменением цвета фона или тени
- Используйте transition для плавного отклика
- Реализуйте кастомный :focus-visible стиль для навигации с клавиатуры
- Применяйте opacity или transform: scale() для анимированного отклика
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
button { -webkit-tap-highlight-color: transparent; transition: opacity 0.15s ease, transform 0.1s ease; } button:active { opacity: 0.75; transform: scale(0.97); } button:focus-visible { outline: 2px solid #0066cc; outline-offset: 2px; } |
Итоговый пример CSS
Ниже приведён полный пример сброса, который можно использовать в реальном проекте. Он убирает синюю подсветку кнопок CSS на мобильных устройствах и добавляет корректное поведение для accessibility:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
/* Глобальный сброс tap highlight */ * { -webkit-tap-highlight-color: transparent; } /* Кастомный отклик для интерактивных элементов */ a, button, [role="button"], input[type="submit"], input[type="button"] { -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; cursor: pointer; } /* Состояние нажатия */ button:active, a:active { opacity: 0.8; } /* Фокус для клавиатурной навигации */ button:focus-visible, a:focus-visible { outline: 2px solid #0066cc; outline-offset: 2px; } |
Этот код совместим со всеми современными мобильными браузерами и не нарушает требования доступности. Добавьте его в начало вашего основного CSS-файла, и синяя подсветка при тапе исчезнет на всех устройствах.
