ErlangРаботыРевюСтатьиКнигаЗаказ
 

Браузер для пользователя и веб-дизайнера

Кирилл Панфилов

Предисловие

Вы должны иметь представление о том, что такое HTML, CSS, JavaScript, gif, тэг и браузер. Иначе читать эту статью не имеет смысла.

Основной текст

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

Есть, однако, пользователи, которые имеют свои предпочтения и вместо Internet Explorer выбирают Opera или Mozilla.

О критериях выбора предлагаю прочитать довольно интересные статьи на странице http://www.3dnews.ru/reviews/software/browser-test/index.htm. Довольно подробно рассказывается о возможностях браузеров Explorer, Netscape, Opera и Amaya в сравнении с точки зрения пользователя: что легче, что тяжелее, какие из браузеров имеют встроенные почтовые клиенты, у какого какая скорость загрузки содержимого страницы, безопасность и стабильность. Небезынтересно это будет знать и веб-дизайнеру, потому что на основе этих данных можно сделать некоторые теоретические выводы о предпочтениях, которые могут отдавать пользователи в пользу конкретного браузера.

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

Вывод один: поскольку вы не знаете, в каком браузере будут просматриваться ваши страницы, постарайтесь сделать так, чтобы они смотрелись как минимум пристойно (а как максимум — одинаково) во всех наиболее распространённых браузерах. А ещё разные браузеры — это не только личные предпочтения, но и аварийные ситуации. Представьте, что резко увеличилось количество хакерских атак на Internet Explorer, либо у вас с ним на компьютере глюк, а переустанавливать систему некогда. Седьмую же Opera установить — дело пятнадцати секунд.

Согласно разным статистическим данным, наиболее распространённым браузером на сегодняшний день остаётся Internet Explorer (далее для краткости Эксплорер) версий 5.0, 5.5 и 6.0, хотя некоторые используют ещё версии 4.x (о версии 3.0 можно забыть). В России его используют от 70 до 95 процентов серферов. На третьем месте по объективной популярности стоит Opera (далее Опера), последние версии которой — 6.x, 7.x и 8.x, ожидается 9, некоторые используют и 5.x, но не более старые, потому что этот браузер вплоть до 4-й версии был платным. Пренебрегать не стоит ни Оперой, ни Нетскейпом (второе место), о котором речь пойдёт ниже, потому что среди ваших заказчиков или клиентов уже готового сайта может оказаться минимум несколько десятков (а то и сотен, и даже тысяч, если сайт представляет собой электронный магазин, информационный портал или место для скачивания) пользователей этих браузеров. На третьем месте стоит группа браузеров, для которой объединение в эту самую группу настолько же оправдано, насколько и неоправданно. Речь идёт о браузерах Netscape и Mozilla: последняя выпущена в нескольких версиях, а кроме этого, есть стремительно набирающий популярность (особенно под Linux) Mozilla Firefox. Мозилла со всеми своими версиями близка по возможностям к Нетскейпу начиная с версии 6.0 (сейчас есть и версии 8.x), тогда как Netscape Communicator (версии Нетскейпа 4.0, 4.5, 4.7) и Netscape Navigator (версии до третьей включительно) на порядок ниже по возможностям, используемым веб-дизайнерами. Пятой версии этого браузера не было.

Есть и другие браузеры: Lynx и подобные (текстовые браузеры, эмуляцию результата отображения веб-страниц в которых можно посмотреть через седьмую Оперу), Amaya (персональный браузер организации w3c), Safari (браузер по умолчанию в современных операционных системах MacOS для компьютеров Macintosh) и масса других, которыми пользуются единицы пользователей. Результат отображения вашего сайта в текстовом браузере нетрудно себе представить, в Safari всё выглядит более чем пристойно, если вы пишете сайт под современные браузеры, а Amaya очень часто не справляется со своей задачей (см. ссылку в начале статьи) и, как результат, почти не используется, особенно в России. В статье я буду говорить только об Эксплорере, Опере и Нетскейпе, потому что на них разработчику нужно ориентироваться в первую очередь.

Больше всего веб-разработчика волнует, как разные браузеры будут читать стилевые таблицы (CSS) и сценарии на JavaScript и других языках активных сценариев, потому что с HTML обычно проблем не возникает. Это довольно большое заблуждение, потому что и с обычной вёрсткой есть проблемы: разночтения в относительных (в процентах) и даже точных (в пикселах) размерах элементов (в первую очередь таблиц), в отступах от края страницы, друг от друга, в перестройке содержимого страницы при изменении размеров окна браузера, в отображении элементов форм и в некоторых специфических параметрах разных тэгов. Речь идёт о таких, например, мелочах: если ссылка является изображением, то при наведении мыши всплывающей подсказкой в Эксплорере будет содержимое параметра alt тэга IMG, в Нетскейпе и Опере — содержимое параметра title тэга A, а если такового нет, то седьмая Опера будет показывать URL, на который ведёт ссылка. Для себя я нашёл такой выход: прописывать одинаковое содержимое для параметра alt тэга IMG и параметра title тэга A. Кроме того, некоторые тэги вообще выводят очень отличающееся содержимое (например, HR, цвета и трёхмерность которых во всех браузерах разные).

Ещё можно сказать несколько слов о включаемых объектах: всегда следует избегать включения фонового звука (и по причинам совместимости, и по причинам субъективным: не все это любят), включения Java-апплетов (поддержка в последних браузерах есть, но файлы виртуальной машины Java приходится догружать отдельно), а также стараться делать вариант HTML, если сайт построен на Flash и есть вероятность использования сайта пользователями со старыми браузерами. И не включайте в страницу элементы ActiveX кроме флэш-вставок, если на эту страницу смотрите не только вы сами.

Теперь имеет смысл подробнее поговорить о трёх вещах: о чтении браузерами HTML-разметки, CSS-директив и сценариев на JavaScript и его аналогах (в Эксплорере используется также фирменный майкрософтовский VBScript, а новая версия универсального языка сценариев называется ECMAScript). Обо всём последовательно.

Наибольшие проблемы со совместимостью при вёрстке на HTML возникают при определении размеров и отступов, особенно относительных.

Вы строите таблицу, ширина которой равна 100% от ширины браузера. Первые несколько ячеек занимает содержимое (тексты, ссылки, картинки), а последнюю вы заполняете фоновым изображением. Так многие поступают в расчёте, чтобы сайт был заполнен чем-то и на мониторах с разрешением 800 на 600 (где эта последняя ячейка будет минимальна), и с разрешением 1024 на 768 точек. Вы рассчитываете, что ширину последней ячейки браузер посчитает самостоятельно. В Эксплорере так и происходит, а в Опере 6 и в любом Нетскейпе все предыдущие ячейки растянутся так, чтобы их размеры были примерно равны. В результате, если содержимое этих нескольких первых ячеек было заполнено изображениями, пригнанными вплотную, между изображениями появятся пробелы. Есть несколько выходов. Первый — использовать JavaScript для вычисления размера последней ячейки (от document.body.clientWidth в Эксплорере и Опере или от innerWidth в Нетскейпе отнимается совокупная ширина всех первых ячеек, и получившееся число назначается шириной оставшейся ячейки). Но этот метод чреват тем, что, во-первых, пользователь легко и просто может отключить активные сценарии, а во-вторых, Нетскейп считает ширину ячеек, у которых назначены в CSS границы, не так, как Эксплорер и Опера. Второй метод — вложить одну таблицу в другую. В этом случае вложенная таблица помещается в единственную ячейку главной таблицы, у вложенной размеры задаются точно, а у главной — в процентах, и вся главная таблица должна быть залита фоном, который рисуется исходя из изображения внутри вложенной таблицы (т. е. как бы продолжает это изображение). В этом случае, если есть возможность, лучше разбить всю таблицу на несколько, стоящих одна над другой, потому что, если Опера прорисовывает содержимое по мере загрузки данных, то остальные браузеры — только когда загрузится вся таблица. Попробуйте написать сложную таблицу и проверьте в разных браузерах. Третий способ — использовать только относительные размеры и не использовать разрезанные в Фотошопе рисунки. Он, естественно, очень ограничивает вас в возможностях. Четвёртый выход подходит тогда, когда вам всё равно, будет ли фоновое изображение справа подогнано встык или нет к основным. В этом случае можно нарисовать фон для самой страницы (а не таблицы), который будет не размножаться, а находиться в правом верхнем углу либо только распространяться по вертикали у правой границы страницы:

body {background:URL(image.gif) no-repeat top right}
или
body {background:URL(image.gif) repeat-y right}

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

Другая проблема связана с отступами содержимого от края веб-страницы. Если у вас есть возможность серверных включений (т. е. вы используете SSI или PHP и другие языки серверных сценариев), то имеет смысл повторять весь кусок кода до изменяющегося содержимого (т. е. после <body с параметрами> и разных навигационных меню и заставок) в отдельном файле, меняя в нём только заголовки с помощью переменных, а во всех остальных файлах делать в нужном месте включение этого файла. В этом случае вам достаточно только в одном файле написать <BODY marginheight="0" marginwidth="0" topmargin="0" leftmargin="0" rightmargin="0" botommargin="0"> с нужными числовыми значениями, чтобы всё работало как надо (свойства marginheight и marginwidth работают в Нетскейпе, остальные в Опере, Эксплорере, Сафари…). Если же возможности серверных включений нет, то приходится прибегать ко включаемым файлам стилевой разметки (CSS), потому что есть вероятность, что один или несколько параметров нужно будет изменить, а файлов, где нужно внести это изменение — около сотни… В этом случае в файле CSS просто пишем строчку

body {padding:0px; margin:0px}
В этом случае совместимость будет и с Оперой (поддерживающей свойство padding для данной задачи), и с остальными браузерами, где работает свойство margin. Чтобы обеспечить полную совместимость, следует использовать вместе и CSS-, и HTML-методы.

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

Относительные размеры — вообще большая головная боль для тех, кто оптимизирует сайты под Оперу. Возможно, это связано с разными методами загрузки таблиц в Опере, с одной стороны, и Эксплорере и Нетскейпе, с другой (об этих методах я уже писал).

Ещё большая сложность — растянуть нужный элемент на всю высоту окна браузера (или на половину, или на другую относительную высоту). В Эксплорере и Нетскейпе height=100% действует безотказно, но только не в Опере (даже в седьмой). Там приходится прибегать к сценариям вроде следующего:

function hght()
{
document.getElementById("tb").style.height=document.body.clientHeight;
}

Предварительно надо назвать растягиваемую таблицу "tb", потому что функция обращается именно к этому имени, а к <body> привязать onLoad="hght". Всё действует во всех браузерах.

А ещё не стоит указывать относительные размеры элементов внутри элементов с относительными размерами, потому что в минимум пятом Эксплорере и в шестой Опере возникнут неподражаемые проблемы вплоть до распространения ширины таблиц на три ширины окна браузера (представьте, где нужно будет искать правые элементы). Чем проще, тем лучше.

Теперь отойдём от проблемы размеров и отступов и поговорим о других, менее болезненных разночтениях.

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

Наконец, проблема форм.

Абсолютно все браузеры отображают элементы форм и связанные с формами отступы по-разному. Причём дело касается не только разных браузеров, но и разных версий одного и того же браузера. Особенные проблемы возникают, если вы пытаетесь поставить форму поиска в тесную композицию, где большие отступы нежелательны. Например, 6-й Эсплорер отобразит одинаковые отступы сверху и снизу формы, 6-й Нетскейп отобразит нижний отступ (до следующего элемента), а верхний отступ будет почти незаметен (или равен высоте интервала между строками в абзаце), 6-я же и 7-я Опера будут отображать очень маленькие отступы, также равные высоте интервала между строками в абзаце.

Сами цвета и размеры всех элементов форм (кроме <INPUT type=hidden>) во всех браузерах разные, и не все из них можно редактировать с помощью стилевых таблиц. Если, например, фон элементов списка <SELECT> в новых браузерах можно залить каким-то цветом, кроме белого, то в 6-й Опере нельзя.

Есть ещё некоторые мелочи. Например, в более или менее длинном списке <SELECT> в Эксплорере будет возникать полоса прокрутки, а в других браузерах нет. А если поставить рядом две и более последовательности <BUTTON>Текст на кнопке</BUTTON>, то в Эксплорере между ними не будут возникать пробелы, а в других браузерах будут. А в старых браузерах этот тэг вообще будет игнорироваться.

(Тут самое время, тяжело вздохнув, перейти к стандарту HTML 2.0, который будет поддерживаться вообще всеми браузерами. Но в нём не будет таблиц, рисунков и много всего другого хорошего. Так что читайте дальше.)

Чтобы покончить с голым HTML (некоторые беды которого можно, как вы убедились, вылечить с помощью стилевых таблиц и активных сценариев), ещё несколько слов о различиях в разных браузерах.

Как бы вы ни старались, высота букв (даже если она точно задана в пунктах) во всех браузерах будет немного разной. А ещё пользователи сами могут менять её, если им захочется. Поэтому или плюньте на веб-дизайн, или загоняйте весь отформатированный текст в gif-картинки. А ещё лучше (по крайней мере, так поступают профессиональные веб-дизайнеры) делайте тянущуюся вёрстку и проверяйте разные возможности издевательств пользователя над вашей страницей. Опера 7 для этого очень хорошо подходит, потому что там есть функция процентного отображения страницы (от «уменьшить в 5 раз» до «увеличить в 10 раз»). Попробуйте отключить в браузере отображение результатов деятельности CSS и установите размер шрифта на «очень крупный».

Элементы маркированных списков, использование их в качестве ссылок, отступы в списках определений, в блоках цитат и других элементах также свидетельствуют об очевидных различиях в браузерах. Об этом же говорят и заголовки разных уровней. Разница есть в имитации трёхмерности горизонтальными линиями и границами таблиц, если они задаются при помощи HTML. Есть разночтения при использовании тэга <META> для перезагрузки страницы.

Старые браузеры не отображают фреймы. Древние браузеры (датирующиеся первыми веками нашей эры) не отображают вообще ничего. Некоторые браузеры 4 версий (в частности, Нетскейп) не отображают плавающие фреймы (<iframe>).

А ещё у Эксплорера и Нетскейпа есть собственные тэги, не поддерживаемые другими браузерами: у первого <LISTING> (особый вид списка, без которого легко можно жить, так как есть другие тэги списков), <BGSOUND> (фоновый звук, который можно эмулировать при помощи включений <EMBED>, а лучше вообще не эмулировать) и <MARQUEE> (поддержка которого появилась в седьмом Нетскейпе и не появилась в Опере вообще; там, где нет поддержки, появляется просто статичный текст). У Нетскейпа (в частности, до четвёртых версий включительно) есть тэги <LAYER> (точно позиционируемый блочный элемент) и <BLINK> (мигающий текст).

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

Эксплорер 4-х версий коренным образом отличается от третьей версии. В нём худо-бедно стали поддерживаться стилевые таблицы и нормально заработали сценарии. В пятых версиях всё это стало поддерживаться хорошо. В шестой — почти идеально. Разработчики браузера стремятся к полной совместимости со стандартами WWW Consortium, при этом вводя много собственных новшеств, например, фильтры типа тени, разных эффектов раскрытия, прозрачности, угла вращения и т. п.

Нетскейп 6-й (особенно с 6.2) и 7-й версий близки между собой (так как построены на новом движке) и безмерно отличаются от 4-х версий. В четвёртых версиях отвратительно работали стили и сценарии, например, толком нельзя было задать границы таблиц, параметры оформления форм, существовала поддержка только небольшого количества объектов, которые можно было изменить при помощи сценариев; возникали ошибки с отображением изображений, использующих в качестве ссылок и так далее. Оправданием тем, кто до сих пор использует Netscape Communicator 4.7, может служить только сила привычки или любовь к очень простым сайтам. Всё движется вперёд, и интернет не меньше других.

Опера с выходом каждой версии обнаруживает коренные новшества. Шестая версия стала по сравнению с пятой намного более удобной, улучшена поддержка сценариев и стилей, тогда как в седьмой полостью стали поддерживаться стандарты CSS level 2 (в частности, точное позиционирование элементов, о котором в предыдущих версиях можно было только мечтать), увеличено количество объектов, свойства которых можно было изменять с помощью CSS и JavaScript. Например, даже задание цветов ссылок с помощью стилей стало возможным только в 7-й версии. Для веб-верстальщика шестая и седьмая версии Оперы — это два разных браузера.

CSS. Самое больное место среди отображения стилевых директив — это границы и доступ к объектам. В четвёртом Нетскейпе вообще невозможно разнообразить цвета и тип линий границ элементов при помощи стилевых таблиц. Пятый Эксплорер не воспринимает пунктирные и штриховые линии. В шестой (и седьмой) Опере поддержка таких директив более стабильна, чем в пятом Эксплорере. Если вы задали цвета и стили границ таблицы (или ячейки), но не поставили никакого содержимого, то ни в одном браузере эти границы не будут отображаться; нужно либо поставить неразрывный пробел, либо однопиксельный прозрачный gif. Кстати, если вы решили эмулировать вертикальные линии при помощи ячеек таблиц, залитых цветом при помощи CSS или HTML. Если в этих ячейках не будет содержимого, то в Нетскейпе и в некоторых случаях в 6-й Опере они вообще не будут отображаться, если цвета заданы при помощи CSS. Наиболее корректная поддержка стилевых директив проведена в 5-м и выше Эксплорере, в 6-м и выше Нетскейпе и в 7-й Опере.

Под доступом к объектам я имел в виду следующее: какие свойства каких объектов можно задавать с помощью CSS. Вот, например, фон страницы. Поскольку при точном позиционировании фонового изображения есть center, который отвечает за вертикальное размещение, и есть center, отвечающий за горизонтальное, то 4-й Эксплорер их просто путает и может начать отображать фон с середины страницы по вертикали, разрезав её на верхнюю и нижнюю половинки, вместо того чтобы разместить фон по центру. В разных браузерах фон то может оставаться на месте с прокруткой содержимого, то не может. Только в Эксплорере версий 5 и 6 есть практически полный контроль над элементами форм (цвета, размеры, но не всегда отступы), тогда как хуже всего он в Опере 6 и ниже и Нетскейпе 4. Только в Эксплорере начиная с версии 5.5 есть контроль над цветом полосы прокрутки (не только боковой, для всей страницы, но и для элементов типа <IFRAME>), что, несомненно, удобно для дизайнеров, так как позволяет обеспечить максимальную цветовую совместимость элементов на странице. Контроль вида текстовых ссылок (вид и наличие подчёркивания, цвета) есть почти во браузерах, но в Нетскейпе только начиная с версии 6, а в Опере полноценно — с версии 7, т.к. до этого была частичная поддержка свойств, и цвета приходилось задавать в <BODY>. Псевдокласс:hover для определения вида ссылки при наведении на неё курсора работает в Нетскейпе только с 6 версии, а в 4-м игнорируется. Кроме перечисленных моментов, на которые стоит обратить особое внимание, есть ещё масса мелочей, которые можно выявить уже в результате тестирования страниц в разных браузерах.

Особого упоминания при разговоре о совместимости свойств CSS заслуживает возможность точного позиционирования объектов на странице. В четвёртом Нетскейпе она реализована при помощи тэга <LAYER top=… left=…>, в остальных его версиях и в остальных браузерах с 4-5 версий — при помощи тэга <DIV> и стилевых директив. В первом случае объект может позиционироваться только абсолютно (и здесь не идёт речь о стилях, здесь авторский HTML от компании Netscape; кстати, внутрь этого тэга можно было вставлять целый отдельный документ, т. е. это аналогия SSI). Во втором — и абсолютно (т. е. относительно края страницы), и относительно другого (родительского или соседнего) объекта. Для Эксплорера возможность такого позиционирования (с 4 версии) достаточно удобна в силу того, что позволяет отказаться от вложенных таблиц как средства вёрстки. Есть особый вид позиционирования (position:fixed), который позволяет элементу оставаться на одном месте относительно окна браузера (а не края документа) при прокрутке длинного документа; это даёт возможность располагать в таких элементах меню и прочие нужные вещи без помощи длинных сценариев. К сожалению, этот вид позиционирования вообще не поддерживается Эксплорером, хотя есть в Опере и Нетскейпе с 6-х версий.

Сценарии. В любом случае следует избегать сценариев на VBScript, если вы пишете страницы не для внутреннего пользования, т.к. этот язык поддерживается только Эксплорером. Наиболее приемлемый вариант — язык JavaScript и его реализации JScript и ECMAScript.

Часто для работы в разных браузерах необходим сценарий, определяющий, что перед нами за браузер и какова его версия. Ситуация осложняется тем, что Опера может прикидываться другими браузерами (самая непонятная функция этого браузера), а при запросе Эксплорера на версию он выдает число «4», даже если программа 5-й или 6-й версии (хотя оговаривается о совместимости). Я разработал сценарий, достаточно точно определяющий браузер и его версию для нескольких последних версий самых популярных браузеров, а также несколько других полезных параметров:

if(navigator.appName=="Netscape") {dw = innerWidth; dh = innerHeight;}
else {dw = document.body.clientWidth; dh = document.body.clientHeight;}
document.write("Ширина экрана (в пикселах): " + screen.width)
document.write("<BR>Высота экрана (в пикселах): " + screen.height)
document.write("<BR>Ширина страницы (в пикселах): " + dw)
document.write("<BR>Высота страницы (в пикселах): " + dh)
document.write("<BR>Браузер: " + navigator.appName)
document.write("<BR>Версия: " + navigator.appVersion)
document.write("<BR>Версия (без параметров): " + parseFloat(navigator.appVersion))
document.write("<BR>Версия (целое число): " + parseInt(navigator.appVersion,10))

document.write("<BR><BR><B>Браузер и версия (точно):</B>: ")
if(window.opera) {var brn = "Opera"}
else if(navigator.appName=="Netscape") {var brn = "Netscape"}
else if(navigator.appName=="Microsoft Internet Explorer") {var brn = "Internet Explorer"}
else {var brn = navigator.appName}
if(brn == "Opera")
	{
	if(document.readyState) {var ver = "7"}
	else if(document.getElementById) {var ver = "ниже седьмой"}
	else {var ver = "устаревшая, рекомендуется 6 или 7"}
	}
else if(brn == "Internet Explorer")
	{
	var vr = navigator.appVersion
	var subvr = vr.substr(22,1)
	if(document.getElementById) {var ver = subvr}
	else if(document.all && parseInt(navigator.appVersion,10)>3) {var ver = "4"}
	else {var ver = "устаревшая"}
	}
else if(brn == "Netscape")
	{
	if(parseInt(navigator.appVersion,10)==5) 
		{ver=parseInt(navigator.appVersion,10)+1}
	else {var ver = parseInt(navigator.appVersion,10)}
	}
else
	{
	var ver = navigator.appVersion
	}
document.write("<br>" + brn + ", версия ")
document.write(ver)

Основные проблемы совместимости браузеров с точки зрения активных сценариев — это доступ к элементам и доступ к содержимому элемента.

Доступ к элементам в Эксплорере 4-й версии и выше осуществляется при помощи директивы document.all['id_элемента'].style.свойство=значение (или просто id_элемента.style.свойство=значение), в более поздних версиях при поддержке этой директивы используется и другая, более отвечающая концепции объектной модели: document.getElementById('id_элемента').style.свойство=значение. В 6-й и более поздних версиях Нетскейпа используется вторая возможность. Естественно, в тэге элемента, к которому обращается сценарий, должно стоять что-то типа id=имя. В Опере 6-7 используются обе возможности. В Нетскейпе 4.x обращение идёт следующей директивой: document.layers.name_элемента.document.свойство=значение. При этом элемент должен быть заключён в тэг <LAYER name=имя>…<LAYER>.

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

Доступ к содержимому слоя производится аналогично: в первых случаях document.all['id_элемента'].innerHTML=текст, id_элемента. innerHTML= текст и document.getElementById('id_элемента'). innerHTML = текст с теми же правилами распределения по браузерам, а в Нетскейпе 4.x более сложной конструкцией:

document.layers.name_элемента.document.open();
document.layers.name_элемента.document.write("текст");
document.layers.name_элемента.document.close();

при этом элемент строго позиционирован.

Зная эти правила, можно ставить в сценарий код определения браузера и в зависимости от этого варьировать сценарий. Можно поступить ещё проще и проверять только поддержку свойств и на этом основании действовать:

if(window.opera && !document.readyState)
{
// Код для Оперы 6
}
else if(document.getElementById)
{
// Код для Эксплорера 5 и выше, Нетскейпа 6 и выше, Оперы 7
}
else if(document.all)
{
// Код для Эксплорера 4
}
else if(document.layers && !document.getElementById)
{
// Код для Нетскейпа 4
}

Вот и всё. Достаточно иметь некоторую сноровку.

Статья будет дополняться по мере поступления ко мне информации.

Послесловие

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