Существует ряд инструментов, позволяющих проверить кроссбраузерность сайта.
- BrowserStark – бесплатный сервис протестирует URL в более чем 200 настольных и мобильных браузерах для разных платформ.
- Browsershots – эмулятор браузеров, функционирующих под различными операционными системами.
- Spoon Browser Sandbox – проверка на совместимость с выбранными версиями обозревателей.
- MultiBrowser – приложение для проверки совместимости с различными движками в режиме офлайн.
- Sauce Labs – инструмент с ограниченным количеством бесплатных функций и мощным их набором в PRO-версии, проверивший более 3,6 млрд. URL.
- Equafy – приложение для выявления недостатков вёрстки.
- Ghostlab – программа для всестороннего тестирования веб-сайта.
Как сделать сайт кроссбраузерным
Сайт не обязательно верстать под все существующие браузеры и делать его отображение строго одинаковым во всех. Достаточно убедиться в нескольких моментах:
- информация читабельна и выводится правильно, элементы не перекрывают друг друга и не съезжают;
- отображается вся необходимая информация;
- сохранена структура сайта;
- отсутствуют недостатки вёрстки.
Сделать сайт кроссбраузерным — значит добиться схожей (не обязательно до мелочей) визуализации контента в популярных браузерах. Достичь такого результата можно несколькими путями.
Применение CSS-хаков
CSS hacks – короткие фрагменты кода, предназначенные для конкретного браузера. Например, в одной из программ часть портала отображается неправильно: в Opera шапка съезжает вниз и перекрывает горизонтальное меню. С помощью CSS-хака, предназначенного только для Opera, шапку поднимают на необходимое количество пикселей или опускают остальной контент.
Следует отметить, что CSS-хаки делают код неэстетичным и увеличивают его в объёме.
Внедрение универсальных элементов
Универсальные элементы кода одинаково хорошо работают в большинстве браузеров, поэтому на них мы не будет подробно останавливаться. С помощью такого внедрения исходный код сайта можно сделать простым, понятным и соответствующим для популярных браузеров.
Вендорные префиксы
Представляют собой приставки перед названиями CSS-свойств, используемых вендорами. Используются в случаях, если CSS-свойство:
- реализует неполную функциональность;
- применяется в качестве эксперимента;
- нестандартно или прописывается для конкретного веб-обозревателя.
Разработчики браузеров создали собственные префиксы для нестандартных CSS-свойств. Они воспринимаются только с префиксом:
- webkit-text-size-adjust – управление визуализацией текста в программах на движке Webkit;
- moz-text-size-adjust – на Firefox;
- o-size-adjust – на Opera.
Заключение
Следует проводить анализ поведенческих показателей пользователей (в случае если есть сайт и необходима его переработка или модернизация). Либо анализ потенциальных пользователей и конкурентов для новых проектов.
Кроссбраузерность и адаптивность сайта увеличивают инвестиции в разработку проекта. При этом эти вложения быстро окупаются за счет следующих аспектов:
- улучшение поведенческих показателей: меньше отказов, лучше конверсии, пользователи больше времени находятся на сайте. Как следствие, вырастут продажи и лояльность клиентов.
- улучшение позиций в поисковой выдаче Яндекс и Google за счет более лояльного отношения поисковых систем к таким сайтам.
- сокращение расходов на техническую поддержку сайта.
- упрощение аналитической работы над проектом.
Если рассматривать адаптивность сайта в устаревших браузерах, то нет волшебной кнопки, которая решит все проблемы. Всегда важно анализировать аудиторию веб-ресурса, чтобы понимать реальное количество пользователей браузеров. Также необходимо тестировать сайт, чтобы находить потенциальные проблемы кроссбраузерности.
В современных браузерах есть установленные стандарты, по которым отображаются сайты. Проблемы же чаще всего возникают с новыми свойствами css и устаревшими версиями сайтов. Чтобы сайт всегда имел одинаковый вид во всех версиях и браузерах, нужно стараться избегать использования CSS-хаков, использовать префиксы, проработать верстку и применять префиксы.