22 Сен 2018

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

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

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

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

Термин «кроссбраузерность» начали использовать в средине 90-х годов, во время браузерных войн. В изначальном контексте кроссбраузерность означала правильную работу сайта в двух популярных браузерах того времени, то есть в Internet Explorer и Netscape Navigator. Потребность в построении универсального сайта для нескольких браузеров возникла из-за внедрения в их структуру различных функций и особенностей, что привело к концептуальным различиям в отображении страниц.

Причины появления

Впервые потребность в создании универсальных сайтов и кроссбраузерности возникла в начале 90-х годов XX века, из-за постоянного противостояния двух компаний, создавших интернет-браузеры Microsoft Internet Explorer и Netscape Navigator. Впоследствии это противостояние назвали браузерными войнами, которые ознаменовали новую эру в развитии веб-технологий.

Постоянная борьба за первенство заставляла разработчиков усовершенствовать работу браузеров и добавлять новые возможности работы с JavaScript и JScript. Из-за постоянной спешки создатели браузеров делали упор на нововведения и уникальные особенности, но совершенно не исправляли серьезные ошибки, которые мешали работе пользователей.

В 1994 году для разработчиков был введен единый стандарт The World Wide Web Consortium (W3C), который обязывал следовать рекомендациям при создании браузеров и веб-сайтов. В первую очередь, W3C был введен для объединения Microsoft и Netscape, что благоприятно послужило для выработки единого скриптового языка «ECMAScript». Вторым достижением W3C стало создание стандарта объектной модели документа ( Document Object Model) для совмещения различных моделей браузеров.

Document Object Model (DOM) — не зависящий от браузеров и языка программирования программный интерфейс, предназначенный для получения доступа к содержимому HTML-, XHTML- и XML-документов, а также позволяющий изменять их содержимое, структуру и оформление.

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

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

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

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

Для решения подобной проблемы используется два популярных способа:

1. Если вы создаете кроссбраузерность для нескольких браузеров, то многие программисты используют специальные перехваты, то есть «хаки» — набор специальных правил и селекторов, которые понимает только один определенный браузер. То есть, для корректной работы и отображения сайта в нескольких браузерах, стоит написать перехваты для каждого из них. Такой метод будет наиболее действенным для нескольких браузеров.
2. Если же вы хотите создать кроссбраузерность для десятков разных браузеров, то самым оптимальным вариантом будет использование стандартных элементов html-верстки, которые одинаково отображаются во всех браузерах.

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

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

Для правильной работы нескольких браузеров с различными версиями, лучше всего создать несколько виртуальных машин с различными операционными системами. Далее, установив на компьютере веб-сервер (например, ISS или Apache) и перейдя на страницу через IP адрес компьютера, вы сможете проверить сайт. Главным недостатком такого способа является длительность процесса установки всех нужных браузеров и ОС.

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