6 июня 2020

Веб-программирование. Что такое кроссбраузерность?

Для просмотра интернет-сайтов пользователи сети Интернет используют специальные программы — браузеры. Еще несколько лет назад посетителям интернета были известны лишь один-два разных браузера, то теперь число таких программ исчисляется десятками, особенно, если учитывать, что каждая из них имеет по нескольку версий, отличающихся по функциональности.
В связи с этим появилось понятие кроссбраузерности — понятие, описывающее свойство сайта идентично работать и отображаться во всех браузерах (обычно учитываются лишь наиболее распространенные). Под идентичностью понимается отсутствие развалов верстки и способность отображать материал с одинаковой степенью читабельности. Понятие «кроссбраузерность» очень часто путают с попиксельным соответствием, что на самом деле является разными понятиями.

Как обеспечить кроссбраузерность сайта?
Чтобы сайт одинаково смотрелся и в Internet Explorer, и в FireFox, и в Opera, и в Google Chrome причем самых разных версий (от стареньких до новейших), веб-дизайнер должен позаботиться о кроссбраузерности своего детища с самого начала работы над проектом.

С чего начать? Ну, во-первых, необходимо определиться, с какими именно браузерами должен работать сайт. Для этого нужно изучить статистику посещений сайтов (например, со схожей тематикой), в которой есть возможность посмотреть, какими браузерами пользовались его посетители. Сервис Google Analytics, например, предоставляет такую возможность. Таким образом, определив наиболее популярные с точки зрения количества посещений браузеры, можно приступать к действию.

Дело в том, что разные браузеры хоть и соблюдают общие правила и стандарты, но может случиться так, что алгоритмы обработки html- кодов и каскадных таблиц css у них окажутся разными. И поэтому не всегда один и тот же элемент выглядит одинаково в разных браузерах.

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

кроссбраузерность
Как протестировать сайт на кроссбраузерность?
Проводить тестирование сайта на кроссбраузерность лучше всего на локальном компьютере, на котором установлены разные браузеры, разные версии браузеров и существует возможность изменять разрешения монитора. Сделать это можно путем создания нескольких виртуальных машин с различными ОС, на которых и будут установлены различные браузеры (Linux, Windows, Mac OS и BSD браузеры).

Проверить сайт на кроссбраузерность можно установив на локальном компьютере веб-сервер (ISS, Apache,…) и обратившись к странице через IP адрес компьютера (http://127.0.0.1). Недостатки этого способа проверки: Вы протестируете сайт только под одной ОС и под браузерами совместимыми с этой ОС, в большинстве случаев Вам не удастся установить более старые версии браузеров параллельно новым версиям, Вы затратите огромное количество времени на установку веб-сервера и браузеров/различных версий браузеров.

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

photo
photo