КРОСС-БРАУЗЕРНОСТЬ: ТЕОРИЯ И ПРАКТИКА.

Прислал: Антон Сущев [ 25.02.2005 @ 14:26 ]
Раздел:: [ Веб-технологии ]

КРОСС-БРАУЗЕРНОСТЬ: ТЕОРИЯ И ПРАКТИКА

ОБЩИЕ ПОЛОЖЕНИЯ

А.А. Сущев,
И.С. Лебедев
cross-browser@yandex.ru( mailto:cross-browser@yandex.ru )

Сегодня Интернет стал по-настоящему массовым, и его популярность постоянно увеличивается за счет удешевления доступа. Многие владельцы персональных компьютеров имеют возможность выхода в сеть. Интернет используется в повседневной жизни для передачи всевозможной информации: от новостей до денежных переводов.

По данным статистики Google ( http://webscript.ru///google.com/ ) на настоящий момент в сети существует более 4 миллионов сайтов ^{1 ( http://webscript.ru/#cross01 )} и постоянно появляются новые. И это не удивительно: для создания своей странички не требуется значительных усилий. Разнообразные визуальные редакторы ^{2 ( http://webscript.ru/#cross02 )} значительно ускоряют и упрощают процесс создания интернет-страниц. К сожалению, качество исполнения таких творений оставляет желать лучшего: при работе с WYSIWYG-редакторами веб-разработчик использует стандартные блоки и не имеет дело с HTML ^{3 ( http://webscript.ru/#cross03 )}-кодом. Использование подобных методов для создания сайтов приводит к тому, что код HTML-документов плохо совместим с различными браузерами ^{4 ( http://webscript.ru/#cross04 )} и содержит много «мусора». Это простительно только для начинающего веб-разработчика. Такой подход неприемлем для профессиональной разработки сайта, особенно для компаний, планирующих работать в сети, например, продавая товар через интернет. В таких случаях очень важны вид и качество исполнения веб-представительства фирмы.

На создание качественного сайта необходимо потратить много усилий. Основная проблема состоит в том, что разные браузеры по-разному отображают интернет-страницы и не всегда так, как это было задумано их создателем. На сегодняшний день существуют три наиболее распространенных клиента: MS Internet Explorer (IE), Mozilla (MZ) и Opera. Кроме того, в семействе MZ существуют другие распространённые Gecko ^{5 ( http://webscript.ru/#cross05 )}-браузеры: Firefox, Netscape 7 и др. По статистическим данным (например, от HotLog ( http://webscript.ru///globalstats.hotlog.ru/ ) или SpyLOG ( http://webscript.ru///gs.spylog.ru/ )), основная масса пользователей использует для сёрфинга ^{6 ( http://webscript.ru/#cross06 )} браузер IE. MZ и Opera — много меньше, но отказываться от их поддержки нельзя, поскольку их доля достаточно велика и постоянно растет.

Наиболее совместимая со всеми браузерами разметка HTML-документа получается при соблюдении стандартов, определённых организацией World Wide Web Consortium (W3C) ( http://webscript.ru///w3.org/ ). Но и здесь существуют подводные камни: дело в том, что разработчики браузеров иногда по-разному понимают спецификации и рекомендации по разработке ПО, что приводит к некорректному отображению документа. К счастью, в современных браузерах ситуация исправляется и в большинстве случаев страницы отображаются корректно.

Практически каждая современная интернет-страница формируется несколькими основными языками, каждый из которых играет огромную роль в её функционировании. Это:

• (X)HTML-код;
• CSS-код (каскадные таблицы стилей);
• JavaScript-код.

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

• определение и целесообразность кросс-браузерности;
• применение функций, зависящих от браузера;
• возможности использования Macromedia Flash.

Определение и целесообразность кросс-браузерности

Итак, что же такое кросс-браузерность? Кросс-браузерность — это термин, означающий идентичность отображения информации во всех современных пользовательских агентах. Основной вопрос — нужна ли она и, если да, то в каких случаях её стоит добиваться, а в каких — нет? Пример не кросс-браузерного сайта можно увидеть на рис. 1.

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

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

Разработка интернет-проектов подчиняется финансовой логике: затраты на разработку должны не превышать разумные пределы и себя окупать. В итоге необходимо получить сервис, доступный для максимального числа пользователей. Но во всём надо знать меру. Как правило, сайт состоит из 2-х основных частей: пользовательской и администраторской. К пользовательскому интерфейсу имеет доступ неограниченное число посетителей и желательно чтобы он работал с любым браузером. Разработка сайта поддерживающего все существующие браузеры будет либо неоправданно дорога, либо сайт будет содержать только обычный текст. Оба пути плохо подходят для реальных задач. Разрабатывать сайт необходимо под массовые браузеры. За общее правило можно взять поддержку браузеров не старше 3-х лет. В большинстве случаев такого подхода вполне достаточно. Но не стоит воспринимать эту цифру как постулат. IE и альтернативные браузеры слишком сильно отличаются друг от друга. И не только функционально. По ряду причин сейчас нельзя отказаться от поддержки IE 5, хотя даже IE 6 старше трёх лет. Многие пользователи, например, по-прежнему используют Windows 98 (SE), где по умолчанию установлен IE 5.0. Скачивать же через Интернет новую версию IE, которая занимает порядка 70 мегабайт, мало кто возьмётся. С другой стороны, Opera 7.50 занимает всего 3,5 мегабайт, и её с лёгкостью можно обновить даже при dial-up соединении.

К интерфейсу администрирования имеет доступ ограниченное число людей, а его функциональность порой очень сложна (например, многие встраивают основанный на HTML и JS WYSIWYG-редактор для удобного добавления информации). В этом случае можно отказаться от кросс-браузерности и писать эту часть интерфейса только под конкретный браузер.

Функции, зависящие от браузера

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

Для демонстрации всего вышесказанного очень нагляден IE. Microsoft предпочитает внедрять в свой браузер собственные «стандарты». На сайте Microsoft ( http://webscript.ru///msdn.microsoft.com/ ) существует большая библиотека, где можно найти информацию по этому поводу.

С одной стороны, использование таких «наворотов», как ActiveX-компоненты в IE, представляются Web-разработчикам настолько соблазнительным, что от них порой не в силах отказаться самый стойкий программист. С другой стороны, использование этих возможностей означает, что они будут работать только в IE — пользователи других браузеров либо не смогут полностью увидеть такую страницу, либо она вообще не отобразится.

Многим веб-разработчикам очень нравятся фильтры, которые MS предоставляет в своём браузере. Существуют разные типы таких фильтров. Некоторые из них способны создать прозрачность блока, некоторые — градиентную заливку. Приведём пример последней:

Если запустить этот пример в IE, можно будет увидеть блок размерами с окно браузера, фон которого — градиентная заливка. Обычными средствами такой трюк можно сделать либо с использованием нескольких блоков меняющих свой цвет с определённой последовательностью, либо с помощью заранее нарисованной картинки. Покажем, как это можно сделать с помощью JavaScript. Мы сгенерируем серию блоков различной цветовой окраски (меняющейся от чёрного до белого цвета):

Этот вариант сложнее, но он будет работать не только в IE.

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

(X)HTML

При написании кросс-браузерного сайта мы рекомендуем использовать новый стандарт XHTML ^{7 ( http://webscript.ru/#cross07 )} (1.0). XHTML — это основанный на XML ^{8 ( http://webscript.ru/#cross08 )} язык разметки гипертекста, максимально приближенный к текущим стандартам HTML. XHTML отличается от HTML строгостью написания кода. Если HTML позволял писать практически любые конструкции и браузер их корректно распознавал, то теперь, с появлением XHTML, это стало невозможным. Последний требует строгого соблюдения всех правил, предъявляемых W3C. Строгие требования к оформлению XHTML-кода позволяют избежать многих ошибок ещё на стадии написания и отладки.

Для ярых приверженцев HTML хотелось бы отметить, что XHTML — это новый язык, который пришёл на смену старому HTML. Новых версий HTML больше не будет. В итоге все браузеры, как предполагается, перейдут на XHTML (очевидно, что при этом сохранится совместимость со старым HTML, но не более того). Так же хотим привести цитату из русского перевода спецификации XHTML от W3C: «Семейство XHTML создавалось с учетом общей совместимости пользовательских агентов. С помощью нового механизма профилирования пользовательских агентов и документов, серверы, прокси и пользовательские агенты смогут преобразовывать содержимое наилучшим образом. В конечном счете, станет возможной разработка соответствующего XHTML содержимого, пригодного для любого поддерживающего XHTML пользовательского агента».

XHTML совместим с HTML при соблюдении некоторых правил, описание которых можно найти в стандарте ( http://webscript.ru///www.w3.org/TR/xhtml1/#guidelines ). Это означает, что даже самые старые браузеры, которые понимают HTML, будут работать и с XHTML.

Для проверки правильности написания XHTML-кода существуют программы-валидаторы (например, он-лайн валидатор от W3C ( http://webscript.ru///validator.w3.org/ )). Кроме того, пользовательские агенты, которые поддерживают XHTML, сами будут вам сообщать об ошибках в синтаксисе, если таковые возникнут. Пример показан на рис. 2.

Чем же XHTML 1.0 отличается от HTML? Существует несколько требований, которые разработчик обязан выполнять:

• в начале документа должен указываться один из возможных DTD (Document Type Definition):
• <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "//www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
• <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
• <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "//www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
• в теле XHTML-документа должны обязательно присутствовать следующие тэги: html, head, title и body;
• обязательно наличие атрибута xmlns в элементе html;
• имена тегов и атрибутов должны записываться в нижнем регистре;
• все значения атрибутов должны заключаться в "кавычки";
• все тэги должны закрываться; если у элемента нет закрывающего тэга, следует добавлять в его конец слеш («<br/>» или «<br />» — пробел для совместимости со старыми браузерами);
• необходимо соблюдать корректную вложенность тэгов («<b><i>текст</b></i>» — неверно; следует писать «<b><i>текст</i></b>»);
• запрещается использовать минимизированные атрибуты («nowrap» следует заменить на «nowrap="nowrap"»); полный список таких атрибутов: checked, compact, declare, defer, disabled, ismap, noresize, noshade, nowrap, multiple, readonly, selected.
• на следующие элементы налагаются ограничения по включению в них других элементов:
• a не может содержать другие элементы a;
• form не может содержать другие элементы form;
• label не может содержать другие элементы label;
• pre не может содержать img, object, big, small, sub или sup;
• button не может содержать элементы input, select, textarea, label, button, form, fieldset, iframe или isindex;
• специальные символы в истинном значении должны заменяться на свои эквиваленты:
• «&» на «&amp;»;
• «<» на «&lt;»;
• «>» на «&gt;».

Кроме того, существует ряд необязательных рекомендаций, которые разработчик не обязан выполнять в версии XHTML 1.0, но в последующих версиях этого языка возможно рекомендации перерастут в требования. А именно:

• декларация XML-документа в самом начале кода перед DTD («<?xml version="1.0" encoding="windows-1251"?>»);
• следование элемента title сразу после открытия тега head;
• использование атрибута id вместо name (name считается устаревшим атрибутом) в тегах a, applet, form, frame, iframe, img и map;
• наличие атрибута type в элементах подключаемых файлов (таблиц стилей и скриптов);
• отказ от использования атрибута target.

Приведём минимальный код правильной XHTML-страницы:

Если вставить этот код в файл, сохранить его как «file.html» и открыть через веб-сервер, то вся информация будет получена клиентом как «text/html». То есть, как и обычная HTML-страница. Фактически для браузера это будет не XHTML, а HTML-документ. У XHTML есть свой собственный MIME-тип: «application/xhtml+xml».

MIME ^{9 ( http://webscript.ru/#cross09 )} — это специальный набор расширений, который указывает программам, как обрабатывать входящую информацию. Изначально MIME-типы были разработаны для почтовых программ, откуда и получили своё название.

Итак, XHTML-данные правильно отдавать клиенту именно в формате «application/xhtml+xml», так как все преимущества, помимо кросс-браузерности (увеличение скорости анализа кода процессором XML, сообщение об ошибках самим браузером и пр.), могут достигаться только в случае, если пользовательский агент поддерживает XHTML и ему сообщается о том, что входящие данные — XHTML-код. Единственное, что надо помнить при отправке XHTML-кода: если браузер понимает XHTML, то только тогда информацию можно отправить как «application/xhtml+xml»; если же нет, то только как «text/html». Список современных клиентов, поддерживающих XHTML: MZ, Opera, Safari. IE, к сожалению, пока не понимает «application/xhtml+xml». Проверять, поддерживает ли пользовательский агент нужный MIME-тип можно по исходящему от браузера заголовку «Accept», где содержатся все MIME-типы, известные клиенту. Приведём пример, как это можно сделать с помощью Perl-скрипта:

При отправке данных как «application/xhtml+xml» надо учитывать ещё несколько моментов, без которых возможно появление ошибок. Так как синтаксически XHTML — это XML, элементы "script" и "style" в XHTML — это #PCDATA-блоки (а не #CDATA). Содержимое таких блоков необходимо помещать в специальную секцию CDATA, иначе процессор XML преобразует специальные символы в их эквиваленты ещё до обработки браузером таблицы стилей или сценария. Следующий пример показывает, как можно это сделать:

Такой синтаксис универсален. Этот код будет корректно работать и при "text/html" и при «application/xhtml+xml».

Хорошим и самым простым решением будет подключение внешних файлов таблиц стилей и скриптов. В XHTML это делается так же как и в HTML:

JavaScript

С JavaScript (JS) всё несколько сложнее. На момент написания статьи существовали две различных интерпретации стандарта ECMA-262 ( http://webscript.ru///www.ecma-international.org/publications/standards/Ecma-262.htm ) ^{10 ( http://webscript.ru/#cross10 )} это JavaScript, используемый в MZ и Opera, и JScript в IE. Внутренняя организация у них разная, но интерфейсы практически одинаковы. Примечательно, что Opera 7+ и MZ позволяют достаточно легко расширять интерфейс для реализации совместимости с IE.

В современных альтернативных пользовательских агентах проблема доступа к элементам страницы ушла на второй план, поскольку разработчики добавили в браузеры большинство специфичных для IE объектов. Тем не менее, мы рекомендуем для работы с элементами страницы использовать DOM ^{11 ( http://webscript.ru/#cross11 )}. На момент написания статьи, существовали три уровня этого стандарта: «DOM Level 1» описывает основные интерфейсы, «DOM Level 2» вводит дополнение XML Namespaces, «DOM Level 3» определяет методы Load и Save. Современными браузерами наиболее полно поддерживается «DOM Level 1».

Приведём простейший пример, когда DOM помогает сделать кросс-браузерную реализацию сворачивания/разворачивания определённого блока div:

Этот пример будет работать в IE и Opera, но не будет работать в Mozilla. В окне «Консоль JavaScript» последнего браузера будет указана ошибка: «myBlock is not defined» (рис. 3). Дело в том, что мы обращаемся к элементу, используя его id в качестве имени переменной. Такая возможность содержится в JScript, но противоречит стандарту JavaScript. Тем не менее, Opera добавила её поддержку для совместимости с IE. В будущих версиях MZ такая поддержка тоже появится, но исключительно в режиме совместимости со старыми HTML-документами.

Напротив, Document Object Model поддерживается всеми клиентами одинаково. При его использовании мы получим правильную работу нашего примера во всех браузерах:

Microsoft использует в IE расширенную модель DOM, которая не полностью совместима со стандартом, определенным W3C. К счастью, эти расширения достаточно легко можно добавить самостоятельно. Следующий пример добавляет функцию RemoveNode из расширения IE в объектную модель MZ и Opera:

CSS

Некоторое внимание хотелось бы уделить ещё одному стандарту от консорциума W3C — CSS ^{12 ( http://webscript.ru/#cross12 )}. На момент написания статьи, существовала вторая и ведётся работа над третьей версией. На самом же деле версия 2.0 этого стандарта поддерживается не полностью некоторыми браузерами (IE, как ни странно, находится именно в этом списке). Лучше всего этот стандарт версии 2.0 поддерживает только MZ. Поэтому рекомендуется очень аккуратно использовать CSS 2.0 при разработке кросс-браузерных сайтов. Наиболее же полно стандарт CSS поддерживается многими (даже старыми) пользовательскими агентами только версии 1.0.

В качестве примера можно привести простое свойство CSS для курсора, которое представляет его указателем, обозначающим ссылку (обычно это символ руки):

Необходимый эффект вышеприведённого примера будет достигнут только в IE. Дело в том, что в стандарте CSS не существует значения «hand» у свойства «cursor». Для получения требуемого результата во всех браузерах, немного изменим таблицу стилей: Этот пример показывает, что даже разные версии IE не полностью совместимы между собой. Мы оставили старое определение «cursor: hand» так как IE версии 5.5 и ниже не понимает значение «pointer» у свойства «cursor», которое определено в стандарте. Это распространённая практика, когда одно и тоже свойство описывают несколько раз для полной совместимости со всеми клиентами.

Для CSS также существует он-лайн валидатор ( http://webscript.ru///jigsaw.w3.org/css-validator/ ).

Macromedia Flash

Ещё один популярный веб-компонент — Flash. Целесообразность его использования — это ещё одна большая статья. Существует масса публикаций на эту тему. Flash удобен тем, что его интерпретатор (plug-in, который называется Flash Player) поставляется для большинства браузеров с одними и теми же функциями. Таким образом, получаем наиболее полную совместимость со всеми пользовательскими агентами одного и того же flash-ролика. Но у Flash есть и недостатки, обсуждение которых выходит за рамки этой статьи. Если сайт — представительство студии дизайна со сложной графической компоновкой, анимацией и интерактивностью, то Flash подойдёт как нельзя лучше. В других же случаях решение использовать Flash должно детально обдумываться и быть взвешенным.

Хорошим решением будет использовать Flash-технологию совместно с другими языками в (X)HTML-документе. Flash может взаимодействовать с JavaScript, благодаря чему у разработчика сохраняются все инструменты для полноценной работы.

Однако к каждой бочке мёда прилагается и своя ложка дёгтя. Современные браузеры поставляются с предустановленным Flash Player. Но нет гарантии, что версия проигрывателя, входящая в комплект поставки, самая последняя. Когда Macromedia выпускает новую версию Flash, она выпускает и новую версию Flash Player. На начальной стадии, после выпуска программного продукта Flash, у большинства пользователей не будет самой последней версии проигрывателя к нему. Macromedia предоставляет возможность обновления flash-проигрывателя через интернет, но не все ей пользуются. Таким образом, если сегодня сделать flash-ролик в программе Flash MX 2004, для которого нужна самая последняя версия проигрывателя (под номером 7), многие пользователи не смогут увидеть его отображение в своих браузерах.

Существует несколько способов решения этой проблемы. Мы рассмотрим один, на наш взгляд, наиболее эффективный. Начиная с версии Flash MX 2004, разработчик может выбирать версию flash-проигрывателя, для которого создаётся ролик (см. рис. 4). Благодаря этому можно получить flash-ролик, совместимый с более ранними версиями Flash Player, которые имеются в большинстве современных браузерах. Единственный минус такого подхода — нельзя использовать функции, которые появились в более поздних версиях Flash. Но в большинстве случаев временный отказ от их применения не такая большая потеря, как это может показаться на первый взгляд. На работе освободилось руководящее место, которое предложили мне. Я – самоучка. Работаю программистом много лет, но специальное образование отсутствует. Для полной совместимости необходимо указать, что язык, используемый в ролике — ActionScript 1.0.

Заключение

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

На данный момент мы рекомендуем тестировать сайты в следующих браузерах: IE 5.x, IE 6.x, MZ 1.x, NN 7.x, Opera 7.x как в среде Windows, так и в Linux или другой *nix-совместимой ОС. Дополнительно можно использовать браузеры Konqueror и Safari, однако использование последнего осложняется тем, что он работает только в операционной системе MacOS.