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

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

В этой статье подробно расскажем про кроссбраузерность и объясним, как ее настроить на сайте.

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

Термин «кроссбраузерность» появился 30 лет назад в самый разгар соперничества браузеров. Разработчики Microsoft Internet Explorer и Netscape Navigator внедряли функции, которые работали только в их браузерах. Из-за этого HTML-, JS- и CSS-коды сайтов стали обрабатываться по-разному в этих программах.

Это оказалось проблемой для владельцев веб-ресурсов. Чтобы ее решить, пришлось делать специальные настройки в коде сайтов. В результате удавалось добиться правильного отображения страниц в популярных обозревателях. Такую особенность и назвали кроссбраузерностью. Ее основные критерии:

Правильное расположение элементов. Компоненты сайта не должны наслаиваться друг на друга и смещаться за пределы экрана — частично или полностью.

Хорошая читаемость текста. Текстовые материалы должны выглядеть понятно и легко восприниматься.

Работоспособность статичных компонентов. Не должно быть проблем с фоном сайта и другими неподвижными элементами.

Работоспособность активных компонентов. Элементы на странице, которые подвязаны на JS- или CSS-анимации, должны выполняться без ошибок.

Чтобы настроить кроссбраузерность, необходимо знать популярные программы для работы с сайтами. Это поможет понять, на что ориентироваться в первую очередь. Вот топ-10 браузеров в России по версии Яндекс.Радара (за 2021 год):

Google Chrome — 40,87%.
Яндекс.Браузер — 25,07%
Safari — 12,99%.
Opera — 4,34%.
Android Browser — 3,32%.
Mozilla Firefox — 2,60%.
Samsung Internet — 2,24%.
Edge — 1,93%.
MIUI Browser — 1,72%.
Internet Explorer — 0,32%.

Зачем нужна кроссбраузерность

Кроссбраузерность помогает:

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

Необходимость в кроссбраузерности зависит от многих факторов.

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

Бывает немного иначе. Сайт делают для пользователей. Аналитики клиента уже подсчитали, что 99% аудитории пользуется браузером Safari, поэтому руководство компании решило не покупать услугу настройки кроссбраузерности.

А бывает и так, что у клиента нет аналитиков и поэтому он не знает, какой процент аудитории использует тот или иной браузер. Здесь кроссбраузерность будет уместна.

Разные случаи — разные решения. Но лучше заранее выяснить, нужна ли поддержка нескольких браузеров. Так вы не потратите впустую свое время и деньги клиента.

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

Browsershots

Онлайн-сервис, который проверяет сайты более чем в 200 браузерах. Результаты тестирования сохраняет в скриншотах.

Можно выбрать бесплатную или платную версию. В первом случае ваш запрос отправляют в очередь, и скриншоты можно ждать несколько часов. Во втором — веб-ресурс тестируют в приоритетном порядке, а результаты бывают готовы за пять минут.

Адрес: browsershots.org

Сервис Browsershots

MultiBrowser

Платный сервис. Работает с большинством популярных браузеров. Программа может скачивать нужные обозреватели или подключаться к тем, которые уже есть на ПК. Умеет проверять веб-ресурсы в офлайн-режиме. В течение двух недель можно использовать бесплатную демоверсию.

Адрес: multibrowser.com

Сервис MultiBrowser

Browserling

Ключевое преимущество сервиса — максимально наглядный и простой интерфейс. Browserling поддерживает самые популярные версии Windows и несколько браузеров: Chrome, Opera, Firefox, Safari, Internet Explorer.

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

Адрес: browserling.com

Сервис Browserling

CrossBrowserTesting

Сервис находит недочеты сайта на базе любых операционных систем и браузеров. Поддерживаются даже платформы Android и iOS. CrossBrowserTesting автоматически анализирует общедоступные и локальные сайты сразу в нескольких браузерах. Также можно создать скриншоты и видео выполненных тестов.

Есть бесплатный пробный период.

Адрес: crossbrowsertesting.com

Сервис CrossBrowserTesting

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

Есть несколько методов, которые помогут оптимизировать ваш ресурс.

CSS-хаки

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

Чтобы лучше понять этот метод, рассмотрим хак для Mozilla Firefox. Для этого создадим квадрат красного цвета:

<style>

.hackBlock {

width: 100px;

height: 100px;

border: 1px solid #000;

background: red

}

</style>

Так квадрат будет отображаться в браузерах

Теперь пропишем свойство, которое будет работать только в Mozilla Firefox:

@-moz-document url-prefix() {

.hackBlock {

background: blue;

}

Благодаря этому в Mozilla Firefox квадрат будет синим, а в других браузерах — красным.

Разница в отображении элемента после добавления хака. Слева — все браузеры, справа — Mozilla Firefox

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

Вендорные префиксы

Вендорный префикс — это приставка перед сущностями в CSS. Благодаря префиксу можно добиться корректного отображения свойств CSS для разных браузеров.

У каждого обозревателя своя уникальная приставка:

-webkit-: браузеры Google Chrome, Safari;

-o-: браузер Opera;

-moz-: браузер Mozilla Firefox;

-ms-: браузер Internet Explorer.

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

Пример добавления вендорных префиксов для свойства transition:

Скриншот кода сайта со свойством transition

А вот пример обычного CSS-кода:

.example {

display: grid;

transition: all .5s;

user-select: none;

background: linear-gradient(to bottom, white, black);

}

Теперь этот же код, только с префиксами:

.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);

}

Чтобы облегчить работу, используйте онлайн-сервис для расстановки вендорных префиксов «Автопрефиксер».

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

Это один из лучших способов добиться кроссбраузерности. Универсальные элементы успешно работают в большинстве браузеров и делают код вашего сайта коротким и красивым.

Проверить, какие элементы поддерживают разные браузеры, можно в сервисе caniuse.com. Это ресурс, который содержит все последние спецификации HTML, CSS и JavaScript.

Как и где искать информацию для настройки кроссбраузерности

Веб-сообщество Stack Overflow

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

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

Адрес: ru.stackoverflow.com

Телеграм-каналы

Frontender’s notes

Основные темы — HTML, CSS, JavaScript, NodeJS, Soft skills. Участники регулярно выкладывают ссылки на статьи по фронтенд-разработке, а также обучающие видео.

Адрес: t.me/frontendnoteschannel

FrontEnd Book

Здесь вы найдете ссылки на книги по фронтенд-разработке. Их можно скачать в ознакомительных целях.

Адрес: t.me/frontendbook

FrontEndDev

Новости фронтенда, переводы актуальных англоязычных статей, уроки по программированию и мануалы по использованию инструментов.

Адрес: t.me/front_end_dev

JavaScript Noobs

Сообщество новичков в JavaScript. Участники помогают друг другу разбираться в популярном языке программирования.

Адрес: t.me/js_noobs_ru

Веб-стандарты

Первое русскоязычное объединение фронтенд-разработчиков. Появилось в 2006 году. На канале есть лента новостей и событий, подкасты, анонсы конференций по фронтенду и многое другое.

Адрес: t.me/webstandarts_ru

Советы: как часто проверять сайт на кроссбраузерность

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

в момент запуска сайта;
когда снижаются показатели продаж;
когда увеличивается процент отказов;
не менее одного раза в 1–3 года (зависит от сложности дизайна).

В идеале стоит совмещать два способа контроля:

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

Читайте также: