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

Для входа на сайты пользуются разными программами. Первое место по популярности уже несколько лет удерживает Google Chrome, его упорно нагоняют Mozilla Firefox, Safari и Opera. Некоторые пользователи не могут расстаться с олдскульным Internet Explorer, другие – с активно продвигаемым Yandex Browser. Разнообразие – это хорошо, но не для разработчика. Каждый браузер по-своему отображает страницы, поэтому на этапе разработки веб-сайтов приходится решать проблему кроссбраузерности. Она отвечает за то, чтобы информация не терялась, картинки стояли на своих местах, а заголовки не убегали за пределы видимости при загрузке в разных программах.

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

Корректное отображение сайта зависит от движка, который использует браузер. Движки по-разному прочитывают html-теги и css-стили, поэтому появляется несоответствие в визуальной части. Большинство из них (Blink, WebKit) – с открытым исходным кодом – дорабатывается компаниями под свои нужды. Обработка данных меняется от версии к версии: страница, которая отлично смотрится в новеньком Mozilla, может быть нечитабельной в старой версии IE.

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

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

Один посетитель может пользоваться разными браузерами для захода на сайт, если на рабочем компьютере у него Chrome, дома Mozilla, а в телефоне Яндекс. Игнорировать этот фактор, значит, добровольно сокращать число посетителей, которые могли бы стать клиентами.

Наш опыт показывает, что сложности с кроссбраузерностью возникают при работе с Internet Explorer. Стоит ли его поддерживать? Ответит метрика. В ней есть данные о браузерах, с которых чаще всего заходят на сайт. Данные считываются по состоявшимся заходам – адаптироваться лучше под топ-5 инструментов, которыми пользуются ваши клиенты.

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

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

Стандартные сложности при адаптации:

  • Ошибки в коде. Нарушение стандартов ведет к тому, что визуальная часть не отвечает ожиданиям. Когда такой код доводят до ума в одном браузере, он «ломается» в другом.
  • Новые библиотеки и CSS могут приводить к некорректному отображению на старых версиях.
  • Разные значения атрибутов по умолчанию (цвет, расстояние до соседних элементов, выравнивание, размер шрифта). Их прописывают в таблице стилей, иначе Chrome, Opera или Safari будут использовать свои – а это приведет к нарушению визуальной части.

При разработке и дизайне web-сайта используют css-хаки и префиксы к названиям CSS-свойств для браузеров (-moz- для Firefox, -webkit- для Chrome). Это удлинняет код, но дает возможность прописать алгоритмы отображения элементов для каждого браузера.

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

Проверка кроссбраузерности становится одним из заключительных этапов разработки web-сайтов. Очевидное решение – установить все существующие браузеры (или 5-10 самых популярных) и открыть в них основные страницы – главную, о компании, карточки товаров, посадочные. Это трудозатратно, сложно, медленно, поэтому чаще разработчики пользуются специальными онлайн-сервисами или локальными приложениями.

Проверку проводят, когда сайт сверстан. Большинство сервисов платные, но имеют бесплатный пробный период. Его бывает достаточно, чтобы проверить один ресурс. Функционал сервисов Browsershots, Browsera, CrossBrowserTesting, Sauce Labs и других заметно различается. Например, Browsershots делает скриншоты, которые нужно анализировать вручную. Sauce Labs кроме отображения в браузерах оценивает адаптивность (отображение на разных ПК, планшете, смартфоне).  

Разработчики Webis Group адаптируют сайты под разные версии браузеров в процессе разработки. Программисты работают в связке с сео-специалистами, дизайнерами, верстальщиками, что исключает ошибки и помогает добиться оптимального для клиента результата. Консультации по телефону +7 (495) 636-29-78.