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

Кроссбраузерность сайта — свойство сайта одинаково хорошо работать и отображаться во всех браузерах, в том числе и в браузерах мобильных устройств на разных платформах (Windows, MacOS, Android, iOS).

Каждый браузер использует собственные алгоритмы обработки CSS и HTML кода. Из-за этого возникают несоответствия в отображении сайта и связанные с этим проблемы.

Существует много разных браузеров, но большинство из них работают они на одном из четырех главных движков: Blink, WebKit, Gecko, EdgeHTML.

На сегодня топ 5 популярных браузеров в русском сегменте интернета выглядит так:
• Google Chrome — 57.6%
• Яндекс.Браузер — 13.1%
• Mobile Safari — 9.5%
• Opera — 4.6%
• Firefox — 4.0%

Некогда популярным Internet Explorer пользуются только 1,5% юзеров. Такое глубокое падение позиций объясняется тем, что начиная еще с разработки первых версий, в него ввели несовместимые со стандартами расширения HTML, впоследствии сохранявшиеся от версии к версии. Это привело к низкой скорости работы и отображения страниц. А 6-ая версия IE вообще считается самым проблемным браузером. Сегодня Microsoft отказался от Internet Explorer и, начиная с Windows 10, выпустил его замену — браузер Edge на новом движке.

Под самые последние версии перечисленных браузеров из топа 5 и нужно настраивать верстку сайта. У браузеров есть мобильные версии. Их тоже нужно учитывать при адаптации сайта.

Если сайт не адаптирован под разные браузеры и платформы, верстка отображается неправильно: съезжают картинки, применяются не те шрифты, изменяются отступы, высота строки, тени и т.д.

Необязательно вплоть до последнего пикселя подстраивать сайт под каждый браузер. Достаточно если он отвечает нескольким параметрам:
• структура сайта остается неизменной;
• верстка без ошибок;
• шрифты отображаются корректно;
• нет наложения фрагментов текста друга на друга;

Как обеспечить кроссбраузерность сайта

Как сделать адаптивную верстку сайта? Есть несколько способов:
• Использовать универсальные стили
• Применять CSS-хаки
• Использовать условные комментарии

Универсальные стили

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

CSS-хаки

Когда сайт корректно работает в двух браузерах, а в третьем какие-то элементы отображаются неправильно, то в CSS-коде этим элементам прописывают отдельные свойства, «хаки», которые понимаются только этим третьим браузером.

Условные комментарии

Суть метода в том, чтобы определить вид браузера пользователя и применить соответствующий стиль. Но условные комментарии понимает только Internet Explorer, поэтому этот способ пригоден только для того, чтобы адаптировать сайт под разные версии IE. То есть делается два стиля: «для Internet Explorer» и «для всех остальных браузеров».

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

Узнать, адаптирован ли сайт под разные браузеры, можно разными способами.

Можно сделать проверку сайта на кроссбраузерность онлайн с помощью специальных сервисов. Их много, но мы можем выделить такие как Browsershots, Crossbrowser Testing, Browserling. Эти сервисы позволяют виртуально увидеть сайт в разных версиях браузеров и движках.

Самый точный, пусть и трудоемкий метод — проверка кроссбраузерности сайта «в поле», то есть тестирование работы и отображения сайта вручную в разных браузерах и мобильных платформах. Этот способ дает наиболее полное представление о поведении сайта в разных браузерах и платформах и может показать неочевидные особенности. На одном компьютере можно установить сразу несколько браузеров разных версий, делается это с помощью виртуальных машин (это своего рода «компьютер в компьютере»).