Кроссбраузерность сайта - что это, как это сделать и как проверить

Кроссбраузерность – это способность сайта одинаково успешно адаптироваться под разные браузеры, корректно и без сбоев в функционировании отображаться в них. Указанный термин появился в 90-х годах, когда уже существовало несколько браузеров и они активно соперничали друг с другом. Из-за того, что создатели приложений начали использовать различные функции, предназначенные для определенного браузера, страницы некоторых сайтов стали отображаться и работать по-разному. Так и возникла необходимость делать веб-ресурсы кроссбраузерными.

Для чего нужна кроссбраузерность

Предположим, вы особо постарались для создания красивого дизайна вашего сайта. Он получился привлекательным, способным обратить внимание многочисленных пользователей. Но, если не проверить кроссбраузерность вашего ресурса, то результат может быть самым неожиданным. Дело в том, что посетители заходят на сайт с разных устройств и браузеров. И может произойти так, что в некоторых браузерах ресурс будет отображаться неправильно. К примеру, шрифт может выглядеть некрасиво или съезжать, не будут видны все картинки или возникнут другие графические проблемы. Что в таком случае произойдет? Посетитель попросту покинет такой сайт и пойдет искать другой.

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

Как сделать сайт кроссбраузерным

Есть ряд критериев, позволяющих оценить кроссбраузерность ресурса:

• Текст. Если это информационный сайт, на котором размещен преимущественно текстовый контент, то этот параметр крайне важен. Если текст съезжает, не отображается, то это плохо.
• Расположение элементов. Некоторые из них могут или немного съезжать, или быть вовсе не видны. Это означает, что сайт не адаптирован к какому-то конкретному обозревателю.
• Нормальная работа всех сайдбаров, кнопок и пр. Если в ответ на клик определенные или все кнопки не работают, то они не функционируют совместно с какой-то конкретной программой или устройством.
• Скорость загрузки. Если страницы загружаются медленно, зависают, то это означает, что какие-то элементы обозреватель не распознает.
• Адаптивность под разные устройства. Сайт должен нормально открываться, а его элементы – корректно отображаться на ПК, планшетах, мобильных устройствах. В случае отсутствия адаптивности следует позаботиться хотя бы о разных версиях для различных устройств.

Неадаптированные сайты сегодня встречаются не очень часто. В большинстве случаев ресурсы отображаются корректно во всех браузерах (если, конечно, они обновлены до последней версии). Если обращение будет идти даже со стороны устаревшего браузера, то и в таких случаях можно решить проблему. Обычно вебмастера устанавливают специальную заглушку, извещающую пользователя об использовании устаревшего ПО. Также ему предлагается перейти на официальные источники, чтобы выполнить обновление. Но, такой вариант подходит далеко не всем. Где гарантия, что пользователь захочет перейти по ссылке и обновить программное обеспечение, а не просто закрыть ресурс?

Как сделать сайт кроссбраузерным

Кроссбраузерность сайта может быть достигнута с помощью специальных действий:

• Применение CSS хаков. Они представляют собой отрывки кода, которые понимает какой-то определенный браузер. Если сайт нормально отображается в нескольких сайтах, а в каком-то другом нет, то можно дописать необходимые хаки. Этот способ считается достаточно грубым и не самым лучшим, так как делает код неэстетичным, но свои функции он выполняет нормально.
• Использование вендорных префиксов. Этот способ является более «мягким» по сравнению с применением хаков. По сути, он уже пережиток. В каждом браузере есть свои вендорные префиксы и уникальные свойства. Например, в Mozilla Firefox это свойство moz-border-radius, в Safari и Chrome – webkit-border-radius. Они способны менять поведение элемента, не влияя на другие браузеры.
• Введение универсальных элементов. Они эффективно работают в подавляющем большинстве браузеров. Если использовать только их, то код будет понятным, эстетичным и чистым. С помощью сервиса caniuse.com можно проверить, какие теги поддерживаются определенной версией движка.

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

Какие браузеры необходимо учитывать при верстке

Кроссбраузерными считаются те сайты, которые отлично работают как минимум в таких браузерах:

• Mozilla Firefox;
• Opera;
• Google Chrome;
• Internet Explorer (в настоящее время – Microsoft Edge);
• Safari (используется на macOS).

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

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

С помощью каких сервисов проверить кроссбраузерность сайта

Установка всех браузеров на компьютерном устройстве невозможна, да и не нужна. А вот воспользоваться специальными сервисами для проверки кроссбраузерности конкретного сайта можно и даже необходимо. Они могут быть платными и бесплатными. Вот некоторые из них:

1. CrossBrowserTesting. Является платным и выполняет проверку в режиме онлайн. Поддерживается почти всеми браузерами и версиями операционных систем.
2. MultiBrowser. Это платный сервис. Работает со всеми сервисами Chrome, Firefox, Safari и некоторыми сборками Explorer.
3. Litmus. Бесплатное пользование доступно 3 дня. Поддерживает большинство мобильных устройств и версий известных браузеров.
4. Equafy. Позволяет не только тестировать кроссбраузерность сайта, но и отыскивать ошибки верстки в режиме автоматического сканирования.
5. Sauce Labs. Тестирует кроссбраузерность онлайн. Функционал пробной версии достаточно ограничен, но при подписке на платный сервис дает возможность пользоваться 700 комбинациями различных разрешений, браузеров и устройств.

Есть и другие сервисы: Browsera, Spoon Browser Sandbox, Browserling, IE Tester, IE NetRenderer, Browsershots, Browserstack, Viewlike.us, Ghostlab.

Кроссбраузерность – это важное условие успешности и хорошей посещаемости сайта. Только те ресурсы пользуются популярностью, которые хорошо открываются в любых браузерах, все его элементы отображаются правильно, а дизайн радует глаз. На такие сайты заходят с удовольствием.