Браузеры на разных движках могут поддерживать или не поддерживать определённые HTML-элементы, по-своему рендерят стили и интерпретируют поведение JavaScript. Поэтому и сайты в них отображаются по-разному.

🚀 Сегодня вам бесплатно доступен тренажёр по HTML и CSS.

Например, у Chrome, Firefox и Safari отличается рендеринг шрифтов и стили по умолчанию.

Разные подписи к полям ввода. Слева Firefox, текст почти незаметен. Справа Chrome, подпись более контрастна

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

В каких браузерах тестировать вёрстку

Всё зависит от проекта, над которым вы работаете. Обычно список платформ указывает заказчик в техническом задании. Если в вашем ТЗ этой информации нет, нужно её уточнить, например, через менеджера проекта. Это важно, потому что пользователи разных сайтов заходят в интернет с определённых устройств и браузеров. И до сих пор некоторым организациям нужно, чтобы сайт хорошо отображался в IE, хотя этот браузер больше не поддерживается.

Разработка сайта под IE11 занимает больше времени и стоит дороже, поэтому чаще заказчик отказывается от поддержки IE.

Если конкретных требований нет, тестируйте вёрстку в самых популярных браузерах: Chrome, Firefox, Edge, Safari, Яндекс Браузере и Opera, а также их мобильных версиях для iOS и Android.

Лучший способ проверки — установить браузеры на свой компьютер и тестировать сайт в каждом из них. Так вы увидите, как страница на самом деле отображается в конкретном браузере и сможете проверить, как работают скрипты или плагины.

Топ браузеров для тестирования сайтов

Самые популярные мобильные браузеры

Самые популярные десктопные браузеры

Это статистика Similarweb по России. На других ресурсах, например, StatCounter или W3Counter, топ будет немного отличаться, потому что сервисы используют различные методы сбора данных. Также статистика меняется со временем, поэтому перед тестированием проверяйте, какие браузеры сейчас актуальны.

💡 Или можете использовать наш подход. Разработчики «Акселератора» проверяют сайты минимум в двух последних версиях:

  • Chrome для проверки на macOS, Windows и Android.

  • Safari на macOS и iOS.

  • Firefox на macOS и Windows.

Это базовое покрытие для проектов «Акселератора». Если в проекте указаны дополнительные браузеры, сайты проверяются и в них.

Как тестировать вёрстку, если нет устройства Apple

Чтобы протестировать вёрстку в Safari, используйте онлайн-эмуляторы, например, browserstack или appetize. Они помогают проверить страницу в популярных браузерах и на различных устройствах без установки дополнительных программ.

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

Проверка в browserstack — как выглядит сайт в Safari 16.3

Оба сервиса платные, но у appetize есть бесплатный план с ограниченными функциями. У вас будет меньше времени на тест, не такой детализированный отчёт и неполный список устройств. У эмулятора browserstack есть бесплатная пробная версия. Вам даётся минута, чтобы проверить вёрстку в каждом доступном браузере и устройстве.

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

Не забывайте и о других проверках. Смотрите, как вёрстка отображается на другой операционной системе, тестируйте сайт на популярных устройствах — эмуляторы и в этом вам помогут. А ещё проверяйте скрипты, чтобы сайт не только хорошо выглядел, но и корректно работал.

Материалы по теме