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

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

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

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

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

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

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

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

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

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

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

CrossBrowserTesting

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

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

Сайт: [mask_link href=»https://crossbrowsertesting.com/» target=»_blank»]crossbrowsertesting.com[/mask_link].

Browserling

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

Сайт: [mask_link href=»https://www.browserling.com/» target=»_blank»]browserling.com[/mask_link].

Sauce Labs

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

Вариант 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);
}

Есть онлайн веб сервис для расстановки вендорных префиксов для лучшей кроссбраузерности: [mask_link href=»https://autoprefixer.github.io/ru/» target=»_blank»]Автопрефиксер[/mask_link]. Его рекомендуют к использованию Google и используют в Twitter и Taobao.

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

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

Примеры хаков можно посмотреть на [mask_link href=»https://habr.com/ru/post/125396/» target=»_blank»]habr[/mask_link].

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

Используйте стандартные html элементы (теги), они практически во всех популярных браузерах одинаково качественно функционируют. Какие теги поддерживаются той или иной версией браузера, можно посмотреть на бесплатном онлайн-сервисе [mask_link href=»https://caniuse.com/» target=»_blank»]caniuse.com[/mask_link].

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

По данным [mask_link href=»https://radar.yandex.ru/browsers» target=»_blank»]Яндекс.Радар[/mask_link] более 70% пользователей Рунета предпочитают с ПК заходить с брузеров: Google Chrome и Яндекс.Браузер.

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

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