Документы - Web-дизайнер

Слуга двух господ: IE и NN (1 часть)

Да, это - бедный web-дизайнер, которому приходится тратить уйму сил для укрощения и дрессировки страничек, чтобы на них было приятно смотреть и при помощи Internet Explorer, и при помощи Netscape Navigator.

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

Установка отступов на страничке

Для примера разберемся с установкой отступов в тэге <body>. Если мы откроем руководство по HTML, которое нам предлагает Microsoft, то прочитаем там, что задать отступы на страничке можно при помощи следующих атрибутов:

leftmargin

rightmargin

topmargin

bottom margin

Будем последовательны и откроем теперь руководство по HTML со стороны Netscape, где прочитаем, что атрибуты для задания отступов выглядят следующим образом:

marginwidth

marginheight

А теперь мы напишем код, который задает отступы слева и сверху и корректно показывается как в IE, так и в NN. Вы уже наверно догадались, что он должен выглядеть следующим образом:

Вуа-ля! Все нормально работает. IE видит только свои атрибуты, а NN свои, и всем хорошо :).

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

Эти возможности лучше не использовать

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

Использование атрибута bgproperties=fixed в тэге <body>. Его появление заставляет фоновое изображение оставаться неподвижным, но, к сожалению, данный атрибут поддерживается только IE, начиная с версии 2.
Использование языка VBScript на динамических страничках. Почему? Потому что он абсолютно не поддерживается NN и, по всей видимости, никогда не будет. Да это и не нужно, так как есть JavaScript, предоставляющий те же самые возможности (и даже больше), что и VBScript, но поддерживающийся обоими броузерами.
Использование ActiveX компонентов. Такие странички будут работать исключительно на Windows-платформах.
Использование тэга <iframe> для создания плавающих фреймов - поддерживается исключительно IE4 и выше.
Использование тэга <blink> - мигающий текст. Во-первых, он применим только в NN, начиная с 3-ей версии, а во-вторых, его применение не несет ничего, кроме раздражения и желания моментально уйти со странички.
Использование тэга <marquee> - нежелательно точно по тем же причинам, что и у тэга <blink>. Разница только в том, что он поддерживается только IE.
Применение специфического для NN тэга <multicol>, выводящего текст на странице в несколько вертикальных колонок, наподобие газетных. В настоящее время для этой цели следует пользоваться таблицами.
Указание ширины и высоты изображений в процентах - поддерживается только IE.

Этот список, конечно, не полон, но это основные ошибки. Все, что описано, касается сайта, выставляемого в Internet. Если же Вы делаете сайт для внутренней сети (intranet), то можете использовать все, что Вам заблагорассудится :).

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

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

Обязательно закрывайте все тэги (кроме одиночных).
Внимательно смотрите за вложенностью тэгов - они не должны пересекаться. Не допускайте такой ситуации, когда внешний тэг закрывается раньше, чем внутренний:
<b><i>правильно</i></b>
<b><i>неправильно</b></i>
В тэге <body> нужно обязательно прописывать все цвета: фон странички, текст, цвет ссылок, цвет посещенных ссылок, цвет активных ссылок или не прописывать никаких. В противном случае может возникнуть такая ситуация, что какой-нибудь из неописанных цветов и, следовательно, взятый из настроек пользователя, совпадет с цветом фона и станет нечитаемым.
Значения атрибутов, содержащих пробелы и другие специальные символы, должны обязательно заключаться в кавычки. При желании Вы можете заключать в кавычки все параметры, но это не является обязательным.
Для всех изображений, помещаемых в HTML-код, обязательно указывайте ширину, высоту и толщину рамки, которую нужно установить в ноль, если у изображения не должно быть рамки. Отсутствие значений ширины и высоты хотя бы у одной картинки при табличной верстке приведет к тому, что загрузка страницы визуально сильно увеличится, т.к. в этом случае страничка начнет прорисовываться только после полной загрузки всех нужных изображений.
Для всех изображений, несущих некоторую смысловую нагрузку, нужно прописывать параметр alt тэга <img>. Причем текстовое описание должно выражать смысл изображения, это позволит просматривать Ваши странички при отключенной графике и все же понять смысл иллюстраций.
Рассматривайте web-страничку, как состоящую из нескольких смысловых блоков (верхняя шапка, меню, основной текст, рекламный блок и т.д.) и наиболее важные из них отмечайте комментариями начала и конца. Это позволит Вам легко ориентироваться в сложных страничках и при правильном построении структуры сайта легко изменить дизайн страниц в будущем.
Регистр букв в именах файлов и ссылках на них должен совпадать. Это особенно важно при размещении сайта на web-сервере под UNIX, иначе Вы вдруг обнаружите, что прекрасно работающий локальный вариант сайта на Вашей машине вдруг оказывается неработоспособным при помещении его на web-сервер. Проще всего названия файлов и ссылки писать всегда в нижнем регистре.
Для ссылок на внутренние страницы используйте по возможности относительные адреса. В будущем, при переносе или реорганизации сайта, Вам понадобится гораздо меньше усилий.
При использовании формы на страничке внимательно смотрите за тем, чтобы все элементы, составляющие форму (<input>, <select>, <textarea>, и т.д.), находились между тэгами <form></form>. Иначе у Вас неминуемо возникнут проблемы с Netscape Navigator-ом.
Если у Вас возникнет сомнение в том, что некоторый код будет корректно обрабатываться одним из броузеров, то лучше сразу проверить это, написав тестовую страничку. Это сбережет Вам массу времени и нервов при отладке страничек.
При использовании JavaScript всегда обращайте внимание на регистр букв в ваших переменных и функциях, т.к. язык различает регистр и для него переменные MyVar и myvar совершенно разные. При придумывании имен для переменных и функций помните о том, что в языке есть зарезервированные имена и встроенные функции. При совпадении названия Вашей функции со встроенной Вы можете потерять кучу времени для установления этого факта.

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

Например, в большинстве случаев незакрытый парный тэг будет обработан Explorer-ом так, как будто он есть, и не вызовет ошибки, хотя сам код, тем не менее, останется некорректным. Лучше учиться писать корректный код, и тогда нареканий в адрес NN будет гораздо меньше.

Но все же следует признать, что некоторые механизмы рендеринга в Navigatore действительно работают не совсем логично (иногда даже совсем не логично :) и абсолютно не так, как в Explorer-е. В этих случаях приходится просто запоминать глюки и особенности NN, как, впрочем, и IE :)

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