Об обеспечении межбраузерной совместимости

Вадим Дунаев http://dunaevv1.narod.ru

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

Все современные браузеры поддерживают модель, рекомендованную W3C, в той или иной степени, и Internet Explorer это делает не хуже, если не лучше, других, но кроме объектов этой стандартной модели он предоставляет разработчику и другие очень полезные объекты, недоступные пока, к сожалению, браузерам-конкурентам. Следует отметить еще и отличия в моделях распространения событий по элементам документа. В конце-концов, Internet Explorer поддерживает не “чистый” JavaScript, а его специфическую редакцию JScript. Однако практически любой сценарий на JavaScript, корректно выполняющийся в браузере-конкуренте, правильно сработает и в Internet Explorer, но не всякий JScript-сценарий будет верно интерпретироваться другими браузерами.

Во избежание возможных недоразумений считаю необходимым предупредить, что рассматриваемые на данном сайте и в моих книгах клиентские сценарии корректно работают в браузере Microsoft Internet Explorer 5+ под Windows. Некоторые из них могут неправильно выполняться или совсем не выполняться в других браузерах (например, Opera и Mozilla Firefox). Это обусловлено в значительной степени особенностями объектной модели документа и браузера, которую поддерживает тот или иной браузер.

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

Если вам, новички, необходимо обеспечить своему сайту межбраузерную совместимость, то постарайтесь реализовать хотя бы следующие идеи:

1. Пишите свои HTML-коды и CSS-описания с соблюдением канонического синтаксиса. Например, значения атрибутов тегов заключайте в кавычки (если только это не ключевые слова и не числа), а при указании размеров в параметрах CSS указывайте единицы измерения (например, px, % и т.п.).
2. Сделайте свои сценарии возможно более простыми, а обработку событий организуйте так, чтобы она не зависела от модели их распространения (не разрабатывайте сценариев в расчете на каскадное распространение событий).
3. Не используйте в своих сценариях коллекцию all всех элементов документа . Вместо нее используйте метод getElementByID(ID_объекта) объекта document.
4. Не используйте на своих страницах графические фильтры каскадных таблиц стилей (CSS). Это — нестандартная часть CSS, поддерживаемая только IE.
5. Не используйте на своих страницах элементы управления ActiveX, т.е. технологию, разработанную и поддерживаемую только Microsoft. Исключение сосставляет лишь проигрыватель Flash-роликов (swf-файлов), который для других браузеров представлен соответствующим plug-in. Flash-ролики должны отображать все графические браузеры.

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

Если же вы создаете проект для интрасети, основанный на использовании IE под Windows, или же вам достаточно подьзователей лишь IE, то указанные выше ограничения не для вас.

Для доступа к элементам документа в Internet Explorer удобно пользоваться коллекцией all.. Эта коллекция не стандартна, но поддерживается многими браузерами. В Internet Explorer допускается некоторое разнообразие в синтаксисе. Так, кроме выражения document.all[“id_элемента”] можно применять и document.all.id_элемента. В других браузерах допустимо применять только выражение вида document.all[“id_элемента”]. Вместо этой коллекции во всех браузерах рекомендуется применять метод document.getElementById(“id_элемента”).
Для получения доступа к элементу, в котором произошло событие, в браузере Internet Explorer используется свойство srcElement объекта event, содержащего информацию о произошедшем событии. В других браузерах объект event не имеет такого свойства, но имеет аналогичное свойство target. В своих сценариях для обеспечения межбраузерной совместимости вы можете использовать следующую конструкцию:
var e = event.srcElement; // для IE
if (!e) e = event.target; // для других браузеров
В Internet Explorer объект window имеет свойство event, содержащее ссылку на одноименный объект события. Это обстоятельство упрощает обработку событий в сценариях для Internet Explorer, но не годится для других браузеров. С целью обеспечения межбраузерной совместимости сценариев необходимо передать экземпляр объекта event обработчику. Если обработчик определен в строке значения атрибута-события в HTML-теге, то в этой же строке можно обращаться к объекту события через его имя event. Например, < INPUT type=”button” onclick=”alert(‘Щелчок в точке ’+event.clientX)”> В других случаях обработчик следует оформлять в виде функции и передавать ей экземпляр объекта event в качестве параметра.

Hosted by uCoz