Кроссбраузерность сайта: почему она так важна и как ее добиться

Кроссбраузерность сайта SEO
Кроссбраузерность — одна из важнейших характеристик сайта, которая подразумевает под собой одинаковое корректное отображение и работу ресурса в разных браузерах (Google Chrome, Safari, Opera, Firefox, Android Browser и т.д. как на стационарных, так и на мобильных устройствах), а также их версиях. Вопрос кроссбраузерности лучше решать на этапе верстки. О том, как протестировать сайт на кроссбраузерность и добиться этого свойства, читайте в данной статье.

Почему верстка сайта может по-разному отображаться и работать в разных браузерах

Причина этой проблемы — отличия в исходном коде браузеров. Особенно это касается старых версий — т.к. они не поддерживают много современных CSS технологий.

Нередко определенные HTML-коды и CSS-стили по-разному воспринимаются и обрабатываются на разных движках, поэтому один и тот же элемент может в одном браузере отображаться и функционировать корректно, а в другом — нет.

Почему кроссбраузерность сайта так важна

Представьте вы зашли на сайт, а он весь кривой и половина его функционала не работает — вы останетесь на нем или закроете? В общем если сайт некорректно отображается, неправильно работает в одном или нескольких популярных браузерах, то он неудобен для использования — отсюда вы просто, на просто теряете посетителей (а это ваши деньги), которые будут уходить с него, не просмотрев и одной страницы. А из этого вытекает еще пару SEO проблем, которые тянут сайт в низ: увеличится показатель отказов (довольно весомый поведенческий фактор ранжирования сайтов) и падают конверсии.

При этом сайт не должен абсолютно одинаково выглядеть во всех браузерах. Вам достаточно:

  • сохранить структуру;
  • не допустить развала верстки;
  • избежать наложения текста на текст, изображения;
  • сохранить читабельность информации.

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

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

Сделать это можно одним из двух способов:
  1. Ручное тестирование кроссбраузерности сайта. Для этого нужно установить на ПК разные браузеры и посмотреть, как сайт отображается в каждом из них. Способ верный, но неудобный: придется скачивать разные браузеры и их версии, а некоторые из них, например Safary (речь о свежем), можно установить только на macOS.
  2. Попросить знакомых, чтобы зашли на сайт со своих девайсов.
  3. Использование специальных онлайн-сервисов (о них ниже) или ПО (например Blisk). Этот способ прост, надежен и самое главное быстрый.

Сервисы проверки кроссбраузерности

Перечислю самые популярные.

CrossBrowserTesting

crossbrowsertesting

Сервис платный (первые 7 дней или 60 минут бесплатно), в нем более чем 2050 реальных настольных и мобильных браузеров. И так же четыре режима тестирования:

  • «Живой» тест. Можно работать с ресурсом в браузере с заранее выбранными параметрами, записывать видео и делать скриншоты.
  • Тест Selenium. Подразумевает автоматическую проверку в соответствии со скриптом, сделанным предварительно. Разрешается записывать результаты в формате видеофайла.
  • Режим автоматического сохранения скриншотов. Можно комбинировать различные ОС, браузеры, устройства и размеры экранов.
  • Локальное подключение. Можно проверить документы, которые еще не загрузились на сайт.

Сайт: crossbrowsertesting.com.

Browserling

browserling

Бесплатно только тестирование в устаревших IE на устаревших платформах.

Сайт: browserling.com.

Sauce Labs

saucelabs

Триал у него довольно ограниченный, а вот при оформлении платной подписки станет доступна автоматическая проверка. Здесь есть около 700 комбинаций браузеров, разрешений и устройств.

Сайт: saucelabs.com.

Litmus

litmus

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

Сайт: litmus.com.

Browsershots

Browsershots

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

В бесплатной версии ваш запрос становится в очередь, и скриншоты начнут подгружаться на сервер поочередно после высвобождения сайтов. Данная процедура может занять от 10 минут до 2-3 часов.

Сайт: browsershots.org.

Browserstack

browserstack

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

Сайт: browserstack.com.

Программное обеспечение для тестирования кроссбраузерности

MultiBrowser

multibrowser

Настоящие веб-браузеры с песочницей, а также набор для тестирования адаптивного дизайна, мобильных устройств, iPhone и iPad Simulator, которые можно запускать в автономном режиме в среде вашего рабочего стола!

Демо версия работает 14 дней.

Сайт: multibrowser.com

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

Вариант 1. Вендорные префиксы

Они представляют собой приставки к названиям уникальных свойств, которые используются вендорами (в данном случае это производители браузеров). Такие префиксы применяются в конкретных случаях, а именно, когда CSS-свойство:

  • нестандартно и прописано для определенного браузера;
  • это эксперимент, который еще дорабатывается;
  • реализует частичный функционал.

Например:

  • -moz- применяется в Firefox;
  • -ms- применяется в IE и Edge;
  • -webkit- применяется в Safari, Google и прочих браузерах на базе WebKit и Blink;
  • -o- применяется в старых версиях Opera (на платформе Presto).

Пример обычного CSS кода:

.example {
    display: grid;
    transition: all .5s;
    user-select: none;
    background: linear-gradient(to bottom, white, black);
}

И этот же CSS код с вендорными префиксами:

.example {
    display: -ms-grid;
    display: grid;
    -webkit-transition: all .5s;
    -o-transition: all .5s;
    transition: all .5s;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
    background: -webkit-gradient(linear, left top, left bottom, from(white), to(black));
    background: -o-linear-gradient(top, white, black);
    background: linear-gradient(to bottom, white, black);
}

Есть онлайн веб сервис для расстановки вендорных префиксов для лучшей кроссбраузерности: Автопрефиксер. Его рекомендуют к использованию Google и используют в Twitter и Taobao.

Вариант 2. CSS хаки

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

Примеры хаков можно посмотреть на habr.

Вариант 3. Универсальные элементы

Используйте стандартные html элементы (теги), они практически во всех популярных браузерах одинаково качественно функционируют. Какие теги поддерживаются той или иной версией браузера, можно посмотреть на бесплатном онлайн-сервисе caniuse.com.

Самые популярные браузеры среди пользователей Рунета

По данным Яндекс.Радар более 70% пользователей Рунета предпочитают с ПК заходить с брузеров: Google Chrome и Яндекс.Браузер.

Популярные десктоп браузеры рунета

Что касается браузеров на мобильных устройствах, то здесь история похожая, только можно еще добавить Safari.

Популярные мобильные браузеры рунета

В общем если занимаетесь версткой, то нужно как минимум ориентироваться на Google Chrome,  Яндекс.Браузер (он по моему на той же платформе что и хром) и Safari. В идеале на все где количество пользователей более 1%.

Понравилась статья? Можно поблагодарить автора: отправив ему донат на
YooMoney
или
Qiwi
. Либо поделившись статьей ☟
Поделиться с друзьями
Алексей

Веб-дизайнер и SEO оптимизатор. Занимаюсь созданием сайтов с 2010 года и их продвижение с 2012 года!

Оцените автора
( Пока оценок нет )
Web-Revenue.ru