Как проверить кроссбраузерность сайта? Вопрос актуален не только для новичков в мире веб-разработки, но и для заказчиков, желающих убедиться в качестве принимаемого сайта. В этой статье рассмотрены онлайн- и офлайн способы проверки кроссбраузерности, а также обсуждается проблема такой проверки для разработчиков, у которых нет устройств Apple (а таких много).

Что такое кроссбраузерность

Для начала определимся с терминами:

Кроссбраузерность — работа сайта без сбоев в вёрстке, функционировании и юзабилити в популярных браузерах, под управлением ОС Unix, Windows, Apple.

Популярные браузеры — браузеры, традиционно входящие в ТОП пользовательских предпочтений:

• Google Chrome
• Opera
• Mozilla Firefox
• Microsoft Edge

Я специально не вношу в список менее популярные браузеры типа Vivaldi, Brave, Yandex браузер. Эти браузеры работают на движке Webkit, и если сайт корректно отображается в Google Chrome, он будет корректно отображаться и в указанных браузерах.

В конечном итоге, кроссбраузерность нужна для создания положительного впечатления от работы сайта у посетителей и, как следствие, для увеличения количества целевых действий на сайте и поднятия позиций в Google и Яндекс.

Как добиться кроссбраузерности

По сути, достижение кроссбраузерности сводится к написанию т.н. браузерных (вендорных) префиксов в CSS коде сайта для каждого из нужных элементов. Например, так выглядит кроссбраузерный код для написания кнопки с префиксом для браузера Firefox:

button {
    text-align: center;
    color: #f8f8f8;
    width: 250px;
    height: 45px;
    background: #f6f6f6;
    border: none;
    padding: 7px 0 6px 0;
}
button::-moz-focus-inner {
    padding:0;
    border:0;
}

Префиксы пишутся как вручную, так и автоматизировано, с помощью сборщиков типа Gulp. Для браузеров типа Internet Explorer (старее IE11), пишутся дополнительные полифиллы (специальные блоки кода на языке JavaScript).

Кроме того, разработчики применяют CSS-хаки, рецепты которых размещены на популярных интернет-форумах.

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

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

• онлайн-сервис порой выдает ошибки, в результате — временные затраты;
• онлайн-сервисы часто требуют платы за дополнительный функционал;
• онлайн-сервисы — не панацея, например проверять работоспособность сайта на iOs лучше на iPhone.

Несмотря на описанные выше недостатки, онлайн-сервисы для проверки кроссбраузерности — отличные инструменты, и я составил свой ТОП-5. При составлении рейтинга я ориентировался на удобство для пользователя, лайв-тестирование без предварительной регистрации, а также на скорость работы сервиса.

1. Screenfly

Сервис, дающий на лету проверить, как будет выглядеть сайт при работе на устройствах с разным разрешением экрана. Поместил его на первое место не за функционал, а за скорость работы.

Плюсы:

• работа «на лету»;
• бесплатный.

Минусы:

• не дает тестировать работу в ОС UNIX и Apple;
• не дает сразу посмотреть результат работы в разных браузерах.

2. Browsershots

Сервис, который проверяет сайт на нескольких браузерах и создает скриншоты для каждой итерации проверки.

Плюсы:

• проверяет работоспособность на ОС Windows, Unix;
• проверяет работоспособность на разных версиях JS;
• дает проверить работу сайта на малопопулярных браузерах.

Минусы:

• бесплатные проверки занимают много времени;
• периодически отдает ошибку 500 при работе.

3. Browserstack

Сервис для тестирования как сайтов, так и мобильных приложений.

Плюсы:

• автоматизация тестирования (в платной версии);крутой функционал;
• крутой функционал;
• есть множество интеграций в популярные IDE и браузеры, что значительно облегчает работу.

Минусы:

• платный, хотя платим за качественный продукт.

4. Browserling

Дает протестировать сайт под управлением Windows и Android. При тестировании открывает нечто вроде виртуальной машины в браузере, (3 минуты в бесплатной версии), где можно проводить разные действия с сайтом.

Плюсы:

• виртуальная машина;
• проверяет работоспособность под Android.

Минусы:

• платный
• нельзя протестировать сайт на iOs или macOS;
• лайв-тестирование всё-таки тормозит при работе.

5. IE NetRenderer

Сервис, проверяющий работу в браузерах Internet Explorer, в том числе и на устаревших. Подойдет для тех, кому важно обеспечить работу именно на Internet Explorer, потому что других браузеров для тестирования на этом сервисе НЕТ.

Плюсы:

• бесплатный;
• скорость работы;
• лайв-тестирование.

Минусы:

• тестирует ТОЛЬКО на Internet explorer.

Как проверить кроссбраузерность на ПК?

Проверить кроссбраузерность сайта можно не только на онлайн-сервисах. Часто бывает достаточно установить на свой ПК три браузера:

• Google Chrome
• Mozilla Firefox
• Microsoft Edge

Каждый из этих браузеров использует свой популярный движок, и работоспособность проекта на трех указанных выше браузерах означает работоспособность на 90% устройств в Сети.

Для проверки работоспособности на ОС Unix (если вы работаете на Windows) используются технологии виртуализации Windows, либо сторонние программы типа VirtualBox.

Плюсы такого подхода:

• бесплатное тестирование;
• большинство браузеров тестируют сайты в режиме адаптивного дизайна и оперативно отслеживать ошибки с помощью инструментов разработчика;
• современные браузеры поддерживают дополнительные расширения для тестирования, в т.ч. и Pixel Perfect, чего нет в онлайн-сервисах.

Минусы:

• временные затраты;
• для установки ОС семейства Unix на виртуальную машину потребуется разобраться в этой технологии.

Как проверить сайт на Safari, работая на Windows

А вот тут вебмастерам, работающим на Windows, не повезло. Ни один онлайн инструмент для тестирования пока еще не может на 100% отследить баги, которые возникают в браузере Safari, на iOs или macOS. А версия браузера Safari для Windows перестала поддерживаться еще в прошлом десятилетии.

К счастью, Apple открыла исходный код одной из версий своей ОС, и это дает определенные надежды на появление адекватных инструментов…но в будущем.

Итак, проверить работоспособность сайта на устройствах от Apple, работая в Windows, можно несколькими способами:

• иметь под рукой iPhone для тестирования. Или попросить знакомого владельца iPhone открыть сайт и проверить работоспособность;
• установить виртуальную macOS (в сети есть варианты решения, я не буду их подсказывать, т.к. способы откровенно пиратские).

Заключение

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

Онлайн-сервисы решают проблему тестирования быстро, пусть и не бесплатно. Но офлайн-тестирование на ПК через инструменты разработчика дает больше информации, хоть и требует больше навыков в общении с ПК.

С вами был webmaster_zotov, до новых встреч!