Тестирование кросс-браузерной совместимости проверяет, что функции и вёрстка сайта работают одинаково во всех поддерживаемых браузерах, их версиях, операционных системах и на устройствах, и включает исправление того, что ломается. Общее кросс-браузерное тестирование касается процесса и инструментов; тестирование совместимости посвящено самим различиям: возможности CSS, которую один из браузеров ещё не реализовал, элементу выбора даты, который иначе ведёт себя на Android, или входу в аккаунт, который не работает при блокировке сторонних cookie.
Что такое тестирование кросс-браузерной совместимости?
Браузер совместим с вашим сайтом, когда каждая используемая функция поддерживается и отображается так, как вы задумали. Тестирование совместимости, часто сокращаемое до CBT, отвечает на три вопроса:
- Какие браузеры и версии мы поддерживаем?
- Работает ли каждая используемая функция во всех них или корректно заменяется запасным вариантом там, где не работает?
- Не сломал ли что-нибудь последний релиз браузера или наш последний деплой?
Более широкое тестирование совместимости может также охватывать операционные системы, оборудование, программы чтения с экрана и медленные сети, но для сайтов основные проблемы возникают именно на стороне браузера.
Почему совместимость по-прежнему важна в 2026 году
- Ваша аудитория распределена между движками. По данным StatCounter за сентябрь 2026 года, на Chrome приходится 66,4% мирового использования браузеров, на Safari — 18,3%, Edge — 6,0%, Firefox — 2,8% и Samsung Internet — 2,3%. На мобильных устройствах у Safari 24,7%, а в США на всех устройствах — 30,4%.
- Каждый браузер на iPhone работает на WebKit. Chrome, Firefox и Edge на iOS используют движок Apple (с ограниченным исключением в ЕС), поэтому ошибка Safari затрагивает всех пользователей iPhone, какой бы браузер они ни выбрали.
- Функции появляются в разное время. Новые возможности CSS и JavaScript выходят в каждом браузере по собственному графику, а старые версии задерживаются на устройствах, которые больше не обновляются.
- Поиск и конверсии. Google индексирует мобильную версию ваших страниц, поэтому вёрстка, ломающаяся на телефонах, вредит и посетителям, и видимости в поиске.
Шаг 1: определите матрицу поддержки браузеров
Поддерживать всё невозможно, поэтому запишите, что именно вы поддерживаете. Начните с данных аналитики и разделите браузеры на уровни:
| Уровень | Типичные браузеры | Обязательства |
|---|---|---|
| A: полная поддержка | Актуальные версии Chrome, Safari (Mac и iPhone), Edge и Firefox; Samsung Internet, если у вас есть трафик с Android | Всё работает и выглядит так, как задумано; автоматические тесты запускаются при каждом изменении |
| B: функциональность | Старые версии, которые всё ещё встречаются в вашей аналитике | Основные сценарии работают; небольшие визуальные различия допустимы |
| C: базовый уровень | Всё остальное | Контент читается, формы отправляются |
Храните матрицу в виде конфигурации Browserslist, чтобы инструменты сборки, такие как Autoprefixer и Babel, ориентировались на те же браузеры. Полезный ориентир — Baseline: функция со статусом «Baseline widely available» работает во всех основных браузерах (Chrome, Edge, Firefox и Safari на десктопе и мобильных устройствах) не менее 30 месяцев, поэтому большинство сайтов могут использовать её без запасного варианта.
Как находить и исправлять проблемы совместимости
- Проверяйте поддержку до разработки. Ищите новые функции на MDN, где на страницах есть таблицы совместимости браузеров и статус Baseline, или на Can I use. Проект Baseline объясняет, как определяется статус.
- Проверяйте поддержку функций, а не определяйте браузеры. Оборачивайте новый CSS в
@supportsи проверяйте наличие API в JavaScript перед вызовом, вместо того чтобы гадать по строке агента пользователя. - Применяйте прогрессивное улучшение. Сначала сделайте так, чтобы контент и формы работали на базовых HTML и CSS, а затем добавляйте новые функции поверх.
- Автоматизируйте рутинные исправления. Autoprefixer добавляет вендорные префиксы, Babel и полифилы обеспечивают работу в старых движках JavaScript, а линтеры вроде eslint-plugin-compat предупреждают, если код использует то, что не поддерживается целевыми браузерами из вашего Browserslist.
- Тестируйте во всех трёх движках. Playwright запускает одни и те же тесты в Chromium, Firefox и WebKit, а сравнение скриншотов помогает находить смещения вёрстки.
- Проверяйте результаты на реальных устройствах. Эмуляторы и режимы адаптивного дизайна подходят для первой проверки, но экранные клавиатуры, касания, прокрутка и видео на настоящих телефонах ведут себя иначе. Используйте собственные устройства или облачную платформу для тестирования, например BrowserStack, TestMu AI (прежнее название — LambdaTest), Sauce Labs или BitBar.
- Тестируйте с включённой защитой приватности. Защита от отслеживания в Safari, строгий режим Firefox и Shields в Brave могут блокировать скрипты, cookie и встраиваемые элементы, от которых зависит ваш сайт.
Распространённые проблемы совместимости в 2026 году
| Проблема | Где проявляется | Типичное решение |
|---|---|---|
| Секции на всю высоту экрана прыгают или прячутся за панелью инструментов | Мобильные браузеры, особенно Safari на iPhone | Использовать динамические единицы области просмотра, такие как dvh, вместо vh |
| Новые возможности CSS игнорируются | Браузеры, в которых эта возможность ещё не реализована, и старые устройства | Проверить статус Baseline и добавить запасные варианты через @supports |
| Поля даты, времени и выбора выглядят и ведут себя по-разному | Во всех браузерах, у каждого свои встроенные элементы выбора | Принять нативные элементы или использовать хорошо протестированную библиотеку компонентов |
| Видео не запускается автоматически или не воспроизводится внутри страницы | Мобильные браузеры и Safari | Автозапуск только для видео без звука и добавление playsinline для iPhone |
| Встроенные формы входа, платежи или чат-виджеты не работают | Safari, Firefox и Brave, ограничивающие сторонние cookie | Предпочитать сценарии в контексте самого сайта, а не сторонних встраиваемых элементов, или использовать Storage Access API и тестировать со стандартными настройками приватности |
| Текст переносится иначе и выходит за границы кнопок | Разные шрифты и отрисовка шрифтов в Windows, macOS и Android | Задать запасные шрифты и оставлять запас места в кнопках и меню |
Чек-лист кросс-браузерной совместимости
- Матрица поддержки записана и хранится как конфигурация Browserslist.
- Новые функции проверены на MDN, Can I use или Baseline до использования.
- Запасные варианты подготовлены для всего, что не относится к Baseline widely available.
- Автоматические тесты проходят в Chromium, Firefox и WebKit.
- Формы, видео и прокрутка проверены на реальном iPhone и реальном телефоне на Android.
- Вход, платежи и встраиваемые элементы протестированы со стандартной защитой приватности.
- Региональные страницы и проверки на ботов протестированы из других локаций и с другими отпечатками браузера (см. как их тестировать).
- Тесты перезапускаются после каждого крупного релиза браузера.
Часто задаваемые вопросы
Нужно ли тестировать совместимость, если сайт хорошо выглядит в Chrome?
Да. На Chrome приходится около двух третей мирового использования браузеров, но один только Safari даёт почти треть визитов в США, а каждый браузер на iPhone работает на движке Safari. Если тестировать только в Chrome, значительная часть посетителей остаётся непроверенной.
Как часто нужно тестировать совместимость?
Запускайте автоматические проверки при каждом изменении кода и после крупных релизов браузеров, а перед значимыми запусками или редизайном проводите ручную проверку на реальных устройствах.
Дорого ли тестирование совместимости?
Необязательно. Playwright, Selenium и Cypress бесплатны, как и данные MDN, Can I use и Baseline. Платные облачные сетки в основном избавляют вас от необходимости покупать и содержать собственную лабораторию устройств.
Чем отличается кросс-браузерное тестирование от тестирования совместимости?
Кросс-браузерное тестирование — это общий процесс проверки в разных браузерах, о котором мы рассказываем в нашем руководстве по кросс-браузерному тестированию. Тестирование совместимости фокусируется на том, поддерживаются ли конкретные функции и код, которые вы используете, и как исправить или обойти пробелы.
