С появлением предварительных версий Netscape Navigator 4.0 и Microsoft Internet Explorer 4.0 разработчики Web-страниц получили шанс проявить себя, работая с новой технологией Dynamic HTML. В статье показаны некоторые способы использования этой технологии, позволяющие получить страницы, которые можно просматривать в Internet Explorer 3.x и 4.x и в Netscape Navigator 2.x, 3.x и 4.x.

Всякий раз, как Netscape или Microsoft выпускают очередную версию соответственно Navigator или Internet Explorer, перед разработчиками Web-страниц возникает задача освоить ту или иную из введенных в браузер новых технологий, но так, чтобы страницу можно было прочитать и в прежних версиях браузеров. Кто-то, конечно, просто заставляет посетителей страницы переходить на новые версии, но такой подход снижает численность аудитории, чего Web-мастера обычно стремятся избежать.

В равной мере на Web-узле невыгодно иметь страницы, которые можно просматривать только в одном браузере: начиная с выхода версии 3.0 доля пользователей Microsoft Internet Explorer среди всех пользователей браузеров непрерывно растет, хотя преобладает по-прежнему Navigator. Таким образом, для большинства Web-узлов необходимо разрабатывать страницы, с которыми смогли бы работать как минимум две (текущая и предыдущая) версии каждого из главных браузеров. Хочу вас обрадовать: способы обеспечить это существуют. И должна огорчить: все они требуют от разработчика дополнительных и подчас немалых усилий.

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

Приводимые в статье примеры проверялись с Navigator 2.02 и Internet Explorer 3.02 под управлением Windows NT 4.0, а также с Navigator 3.0 и 4.0b2 и с Internet Explorer 4.0 под управлением Windows 95.

Перенаправление ввода браузера

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

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

Функция change_document определяет тип браузера по значениям признаков appVersion и appName класса navigator. Затем на основе полученного значения типа строится строка, содержащая URL новой страницы:

Недостаток данного способа учета различий между браузерами и версиями в том, что для поддержки, например, Netscape Navigator 2.x, 3.x, 4.x и Internet Explorer 3.x и 4.x нужно размножить каждую содержательную страницу в пяти экземплярах!

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

Варианты для разных браузеров в пределах одной страницы

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

Ниже мы разберем пример страницы, которая ведет себя следующим образом. Во всех браузерах и версиях при ее загрузке меняется цвет фона. В Netscape 2.x этим все и ограничивается. В Internet Explorer 3.x иерархическая стилевая таблица (стандарт CSS1 - Cascading Style Sheets) переопределяет оформление для элемента

(заголовка первого уровня), а в Netscape 3.x меняется изображение, появляющееся при первом открытии документа. В IE 4.0 меняется и изображение, и оформление элемента

(размер и цвет символов). И наконец, в Netscape 4.0 также меняется элемент

, но на этот раз с помощью динамической стилевой таблицы (Dynamic Style Sheet, DSS), т. е. сценарий на языке JavaScript применяется к элементам стилевой таблицы JavaScript (JavaScript Style Sheet, JSS).

Начнем с определения стилевых таблиц для Web-страницы. Нам потребуются таблицы типов JSS и CSS1:

Приведенные определения стилевых таблиц, обеспечивающие новое оформление элемента

, будут использованы чуть ниже в функциях JavaScript.

Следующим шагом определим глобальные переменные для типа и версии браузера, обращающегося к странице. Будучи по природе глобальными, эти переменные окажутся доступными в любом месте страницы, где используется JavaScript:

На этом месте сценарный блок закрывается, поскольку остальные функции пишутся на разных версиях JavaScript. Начнем с написанной на JavaScript 1.1 функции change_document3, меняющей изображение на странице. Если значение переменной isNS3 истинно, change_document3 вызывает затем функцию change_ document4. Заметьте, что в секции глобальных переменных значение isNS3 устанавливается истинным и для Netscape 3.x, и для Netscape 4.x:

Сценарии на JavaScript 1.1 выполняются только теми браузерами, которые поддерживают этот язык. В их число входят Netscape 3.x и 4.x, а также IE 3.0x и 4.x.

Перейдем теперь к функции change_document4. Она размещается в сценарном блоке JavaScript 1.2 и поэтому вызывается только при обращении к странице из Navigator 4.x. Для инкапсуляции исходного содержимого страницы функция использует HTML-элемент . При ее вызове это содержимое убирается с экрана и замещается новым с помощью другого объекта LAYER.

Теперь закроем секцию . В элемент вставим перехват события onLoad для Web-страницы. Если используется IE 4.0, будем вызывать функции change_new, change_document и change_document3, во всех остальных случаях - только функцию change_document. Кроме того, разместим на странице изображение и заголовок

:

 Тестовый заголовок 

Рассмотренный пример - лишь один из многих вариантов того, как можно было бы определить браузер и версию и в зависимости от значений этих параметров выполнить те или иные действия. Чтобы разделить разные версии Navigator, мы воспользовались разными сценарными блоками, поскольку в большинстве случаев в них окажутся функции и обработчики событий, реализованные лишь для конкретной версии конкретного браузера. В нашем примере Navigator 3.x должен работать с элементом , а Navigator 4.x - с элементом . Приписывая сценарию определенную версию JavaScript, мы гарантируем, что браузер, не работающий с объектами данного типа, не попытается его выполнить.

Одним из замечательных свойств Navigator 3.x (хочется верить, что Netscape сохранит его и в версии 4) является возможность перегрузки функций, написанных на разных версиях JavaScript. Так, поведение нашей тестовой страницы целиком определяется версией JavaScript. Функция под названием change_document() есть в двух блоках: со сценарием на JavaScript и со сценарием на JavaScript 1.1. При этом Navigator 2.x и Internet Explorer 3.x обратятся к сценарию в первом блоке, а Navigator 3.x - к сценарию во втором.

На данный момент Navigator 4.0 не обращается к блоку JavaScript 1.2, но я надеюсь, что это будет сделано в одной из предварительных версий либо в окончательной. IE 4.0 выполняет сценарий в блоке JavaScript 1.2. Чтобы явно предписать браузеру то правильное поведение, которое в скрытой форме задано указанием на язык сценариев, можно воспользоваться переменной navigator.appName.

К сожалению, Microsoft, перейдя на VBScript, по-видимому, не собирается поддерживать версии (если я ошибаюсь, сообщите мне, пожалуйста).

Правила для Web-страниц, дружественных к браузерам

Вот несколько простых правил, которыми я руководствуюсь при разработке Web-страниц.

1. Учитывайте свою аудиторию.

На моем узле бывают главным образом разработчики Web-страниц, так что я могу всячески играть с его содержимым, будучи уверенной в том, что большинство посетителей располагают новейшими браузерами, причем, скорее всего, это Navigator и Internet Explorer.

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

2. Примите решение о поддержке браузеров.

Определив, кто будет посещать ваш узел (см. правило 1), необходимо осознать, что не существует способа угодить сразу всем.

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

3. Не навязывайте новшеств.

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

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

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

4. Пусть на узле будет хотя бы одна чисто текстовая страница; еще лучше иметь текст на каждой странице.

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

5. Позаботьтесь о тех, кто плохо видит.

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

6. Тестируйте свои страницы с разными браузерами и версиями.

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

7. Пусть работа будет вам в радость.

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

Счастливого творчества!