Что такое кроссбраузерность и зачем она нужна?

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

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

Иногда получается, что прекрасно работающий в любимом Chrome сайт внезапно превращается в малознакомого монстра в браузере Internet Explorer. Ну ладно, на самом деле, так получается не то чтобы иногда. Так получается очень часто.

Вот, что случается с сайтами, которые верстаются без оглядки на IE Вот что случается с сайтами, которые верстаются без оглядки на IE

Возникновение

Началось всё в далеких-далеких 1990-х, когда велась кровавая война, получившая впоследствии название «Великая Браузерная».

Два браузера — Microsoft Internet Explorer и Netscape Navigator яростно боролись за популярность, а борьба эта заключалась в добавлении новых возможностей по работе с JavaScript и JScript.

Netscape Navigator версии 2 Netscape Navigator версии 2

Наперегонки, без координации друг с другом, они наращивали поддержку новых «фич», забывая порой исправлять серьезные ошибки.

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

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

Фактически представляет любой документ в виде дерева, каждый узел которого является объектом — текстом, изображением или просто атрибутом.

Чуть позже, в 1996 году, консорциум W3C выпустил первую редакцию-рекомендацию CSS 1. Это привело к настоящей революции в веб-дизайне. О тернистом пути CSS я уже когда-то писал в статье «Приправь свой сайт магией CSS3». Веб-дизайнеры получили в руки могучие инструменты и пустились в творческие поиски. И всё бы хорошо, если бы не одно «но».

Смутное время царствования Internet Explorer’a

До 2001 года миром браузеров безраздельно правил Internet Explorer. Шутка ли, но, по разным оценкам, его рыночная доля составляла от 90% до 95%. Он был настолько популярен, насколько может быть популярен единственный выживший на острове мужчина.

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

Кстати, Internet Explorer побывал на другой стороне силы. В 1996 году была выпущена первая специальная версия для MacOS — Internet Explorer 2.0 for Mac.

Одна из последних версий Internet Explorer for Mac Одна из последних версий Internet Explorer for Mac

Продолжал он выходить до самого 2003 года и версии 5.2.3, незадолго до этого собственно и прекратилось развитие этого браузера, а Apple начала работу над своим собственным.

На царство IE надвигались сумерки.

Появление героев – Mozilla Firefox и Webkit

В 2002 году была выпущена первая версия браузера Mozilla Firefox, тогда еще — Phoenix 0.1, немного позже переименованного в Firebird, чтобы в конце концов стать Огнелисом.

Первая ласточка альтернативных браузеров, а точнее — феникс. Первая ласточка альтернативных браузеров, а точнее — феникс.

Преимуществом Firefox было использование свободного движка Gecko, которое позволило значительно расширить функциональную базу.

После выпуска Firefox версии 1.0 в 2004 году счетчик загрузок перевалил за 25 миллионов за 100 дней, и всего за год Firefox получил примерно 10%-ю долю на рынке браузеров.

Можно сказать, что появление большого количества альтернативных браузеров и пробило брешь в железной стене Internet Explorer’a.

Именно рост популярности таких браузеров, как Opera, Safari и Firefox сделал проблему кроссбраузерности по-настоящему актуальной. Ведь у каждого из них был собственный механизм интерпретации кода верстки веб-сайта.

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

Так и родился проект The WebKit. 25 июня 2001 года Дон Мелтон создал библиотеки WebCore и JavaScriptCore как отдельную ветку проекта KHTML/KJS. WebKit — открытый и свободный движок для отображения веб-сайтов. Сегодня это наиболее популярный движок среди альтернативных браузеров.

В 2003 году вышел первый браузер на базе WebKit — Safari для MacOS и Windows. После этого начался победный марш WebKit по планете в рамках огромного количества альтернативных браузеров.

Одним из браузеров, родившихся благодаря ему, стал браузер с открытым исходным Chromium, разработанный Google. Он, в свою очередь, дал жизнь десятку новых. Среди них — сверхпопулярный Google Chrome и даже результаты потуг наших поисковых систем — Яндекс.Браузер и Рамблер Нихром.

Webkit используется во всех современных браузерах на мобильных устройствах — начиная от Apple iOS и Google Android, заканчивая webOS и BlackberryOS.

Браузер в мобильной ОС Blackberry 6.0 разработан на базе WebKit Браузер в мобильной ОС Blackberry 6.0 разработан на базе WebKit

На данный момент WebKit наиболее полно поддерживает последние рекомендации W3C.

Разумная кроссбраузерность

Поначалу кроссбраузерность была той ещё проблемой. Сайты в разных браузерах вели себя совершенно по-разному, и необходимость заставить сайт корректно работать в Internet Explorer 6.5 просто доводила верстальщиков до безумия.

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

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

С одной стороны, стоит определить для себя рамки разумного, а с другой стороны — брать во внимание специфику и целевую аудиторию проекта.

Хотя кого мы обманываем, по данным StatCounter, W3Counter за октябрь 2012, доля Internet Explorer 7 составляет от 1% до 5%, не говоря уже о IE6. Господи, а ведь некоторые говорят!

Мне кажется, стоит определить для себя такую схему — поддерживать две последние версии браузера, при чем по схеме graceful degradation.

Уже сейчас 9 версия так всеми ругаемого Internet Explorer почти не доставляет хлопот, небольшие усилия для поддержки IE8 скоро тоже уйдут в прошлое — объявленная бета-версия IE10 на всех парах примчится к нам и всех спасет. Будем надеяться.

Будущее

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

На дворе 2012-й, рекомендация CSS3 уже почти с нами, но — не до конца, что и является основной проблемой кроссбраузерной верстки.

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

А вот проблема неправильной интерпретации HTML в современных браузерах решена — HTML5 предоставляет браузерам четкие инструкции по интерпретации некорректной верстки