Проверка на кроссбраузерность - Digital-агентство ADVEGITAL

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

Кроссбраузерность сайта — свойство сайта одинаково хорошо работать и отображаться во всех браузерах, в том числе и в браузерах мобильных устройств на разных платформах (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. Эти сервисы позволяют виртуально увидеть сайт в разных версиях браузеров и движках.

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

Нужен настоящий SEO-сайт и интернет-реклама? Пишите, звоните:

Наша почта:
Единая справочная (звонок по России бесплатный): 8-800-551-39-15
WhatsApp: +7 (960) 048 81 32
Оставить заявку

1 1 1 1 1 1 1 1 1 1 Рейтинг: 0.00 (Голосов: 0)