Использование Веб Стандартов в ваших Веб Страницах

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

Эта статья посвящена обзору методов усовершенствования ваших веб страниц в соответствии с веб стандартами W3C. Первые 2 раздела адресованы исключительно заметкам о стандартизации, преимуществам стандартизации, устаревшим тегам и атрибутам, как стандартизовать код страницы и как создавать CSS с помощью рекомендаций, методик и справочной информации. Другие разделы адресованы DOM и DHTML программированию, сравнению с W3C стандартами, а также примерам замены кода на стандартизованный. Каждый предлагаемый в этой статье заменяющий код работает без проблем во всех современных браузерах: MSIE 6+, Netscape 7+, Firefox 1+, Opera 8+, Safari 2.x, Konqueror 3.4+, Icab 3.x, и других. Последний раздел "Резюме" приводит обзорную таблицу сравнений всех замен кода и элементов, описанных в данной статье.

Содержание:

• Преимущества использования веб стандартов
  • Преимущества использования стандартизированного кода
  • Преимущества отделения содержимого от оформления с помощью CSS
  • Преимущества использования корректного CSS кода
  • Несовместимость браузеров исчезает
  • 2 опасности использования WYSIWYG(визуальных) HTML редакторов
• Создание страниц с использованием веб стандартов: руководство
  • Выбор объявления типа документа
  • "Переключение между DTD"
  • Проверка кода на соответствие стандарту
  • Где и как проверить HTML код
  • 5 самых распространённых ошибок, возникающих в процессе проверки и как с ними бороться
  • Как писать код, не используя популярные теги <font>,<center>,bgcolor
    • Как заменить <font> с помощью CSS
    • Как заменить <center> или align="center" с помощью CSS
    • Как заменить bgcolor с помощью CSS
  • Как писать код не используя теги <embed>, <applet>, <marquee>, <bgsound>
    • Как заменить <embed>
    • Как заменить <applet>
    • Как заменить <marquee>
    • Как заменить <bgsound>
  • Проверьте свой CSS код на соответствие стандартам
  • Где и как проверить CSS код
• Использование W3C DOM
  • Нестандартные свойства объектных моделей документов
  • Доступ к элементам веб страницы с помощью W3C DOM
  • Управление Содержимым и Способом Отображения (Стилями) Документа
• Разработка Кроссбраузерных/Кроссплатформенных веб страниц
  • Подход через определение браузера: не лучший и ненадёжный
  • Подход через определение Объектно/Функциональноых возможностей: наилучший и самый надёжный способ
• Резюме

Преимущества использования веб стандартов

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

Преимущества использования стандартизированного кода:

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

Важно писать код правильно хотя бы по одной причине, которая часто не принимается во внимание: в спецификации HTML 4.01 не существует механизма коррекции ошибок.

Сноска: HTML 4.01, Section B.1 Notes on invalid documents
Спецификация 4.01 не даёт указаний на то, каким образом браузер должен обрабатывать элементы, атрибуты или значения атрибутов, не описанные в данном документе.

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

• отсутствие закрывающих кавычек в значениях атрибутов
• некорректное вложение элементов

  Теги должны закрываться в правильном порядке, теги не должны перекрывать друг друга.

  Пример неверного синтаксиса из-за перекрывающихся тегов:

  <p>В строке 2 <strong>выделенных слова.</p></strong>

  Это распространённая ошибка среди начинающих; HTML валидатор выдаёт на неё следующий тип сообщения об ошибке:
  "Закрывающий тег для 'STRONG' пропущен, но спецификация данного элемента этого не допускает. (...) вы поместили что-то недопустимое внутри тега и валидатор сообщает что тег должен быть закрыт до начала такого содержимого (...)"

  
  

  Пример правильного синтаксиса и вложения тегов:

  <p>В строке 2 <strong>выделенных слова.</strong></p>

  
  
• неверное использование элементов или неверное расположение

  Другая часто возникающая ошибка это вложение блочного элемента (например <table>,<div>,<p>) внутрь линейного (<span>,<strong>, и т.д.)

  Следующий пример кода имеет неверный синтаксис потому, что линейный элемент <b> окружает блочный элемент <p>:

  <b><p>Это выделенный параграф.</p></b>
  

  Это распространённая ошибка среди начинающих; HTML валидатор выдаёт на неё следующий тип сообщения об ошибке:
  " тип документа не допускает здесь элемент 'B' (...) Возможная причина возникновения ошибки в том, что вы поместили блочный элемент (такой как <table> или <p>) внутрь линейного элемента (такого как <a> или <span>)."

  
  

  Пример правильного синтаксиса, когда линейный элемент (<b>) вложен внутрь блочного <p>:

  <p><b>Это выделенный параграф.</b></p>
   

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

Преимущества отделения содержимого от оформления (шрифты, цвета, отступы, рамки и проч.) с помощью CSS:

• небольшой размер и быстрая загрузка файлов
• лучше контроль за отображением
• лучше работоспособность на различных платформах и устройствах
• проще вносить изменения, больше возможностей

Сноска: HTML 4.01, Section 2.4.1 Separate structure and presentation
Опыт показывает, что отделение структуры документа от способа оформления уменьшает затраты на обслуживание широкого круга платформ, устройств и т.д, а также облегчает дальнейшую работу с документом.

Преимущества использования корректного CSS кода:

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

Несовместимость браузеров исчезает

В течение последних 5 лет производители браузеров начали поворачиваться лицом к стандартам. Постоянно улучшаются и корректируются механизмы обработки HTML и CSS страниц написанных с использованием веб стандартов.

2 опасности использования WYSIWYG(визуальных) HTML редакторов

Многие начинающие вебмастера создают свои страницы с помощью WYSIWYG HTML редакторов, например MS-Front Page, DreamWeawer и др. Одна из опасностей их использования в том, что процесс редактирования сильно зависит от того, что мы при этом видим на экране монитора, т.е. от получаемого результата. Но в мире существует множество браузеров и подобных редакторов, и совсем не факт, что в них эта страница будет выглядеть также. Визуальные редакторы часто вводят пользователей в заблуждение тем, что то, что они видят, будет выглядеть также и у любого другого человека просматривающего это страницу. И если вебмастер не может протестировать свою работу на всех возможных браузерах, платформах и устройствах, то единственным реальным и рекомендуемым тестом остаётся HTML и CSS валидатор на соответствие стандартам. Этот тест является браузеро-независимым, в отличие от всех визуальных редакторов, которые браузеро-зависимы (браузеро-ориентированы).

Другая опасность использования визуальных редакторов в том, что они имеют тенденцию добавлять в получаемый код множество ненужных элементов (типа <br>,  и spacer.gif) для того чтобы позиционировать или зафиксировать положение объектов на странице. Поэтому даже если вёрстка и соответствует стандартам, то конечный результат всё равно получается не масштабируемым (зависит от разрешения экрана), очень тяжёлым (большой размер HTML-файла) и засоренным лишними тегами. Это совсем не соответствует стремлению верстать чисто, лёгко и изящно. В большинстве случаев подобные излишние теги заменяются умелым использованием CSS свойств, таких как padding, margin или clear.

Создание страниц с использованием веб стандартов: руководство

Шаг1: Выбор объявления типа документа

Здесь находится список всех возможных объявлений типов документов:
http://www.w3.org/TR/html4/struct/global.html#version-info

Рекомендуется объявлять строгий тип документа - HTML 4.01 strict Document Type Definition

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

"Переключение между DTD"

У HTML 4.01 strict есть и другие преимущества. Современные браузеры могут отображать веб страницы в 2х разных режимах: обратно-совместимом("угадывающем", браузеро-ориентированном) и в режиме соответствия стандартам ("стандартном" режиме). Браузеры выбирают один из этих методов в зависимости от объявления типа документа веб страницы: эта особенность называется "переключением между типами" или "DTD сниффинг - принюхивание к типу". Когда объявляется тип документа который переключает браузер в режим соответствия стандартам (например HTML 4.01 strict), современные браузеры начинают более чётко следовать спецификации веб языков (HTML4 и CSS), в особенности той их реализации, которая известна как "CSS 1 box model". Так что при создании страниц можно обходиться и без дополнительного кода для разных браузеров. Режим "переключения" есть у большинства современных браузеров (Opera 9.x, Safari 2.x, Icab 3.x, MSIE 7, Firefox 2.x, Camino 1.x, Seamonkey 1.x, Konqueror 3.5+, etc.)

Шаг2. Проверка кода на соответствие стандарту

Следующий шаг это тест кода на соответствие спецификации HTML 4. В процессе тестирования вебмастер проверяет, что синтаксис и грамматика его веб страницы соответствует формальным правилам заявленного типа документа (DTD). Авторы веб страниц должны быть особенно внимательны к ошибкам выдаваемым HTML валидатором.

Где я могу проверить свою веб страницу? Как это делается?

Бесплатно он-лайн:

• W3C markup validation service от консорциума W3
• WDG HTML Validator
• Validome validation services: Validome валидатор поддерживает несколько языков (Английский, Французский, Русский и Немецкий) и его отчёт наиболее полный и точный.

Бесплатно офф-лайн:

• Бесплатный валидатор в виде дополнения к FireFox (SGML анализатор), используется тот же механизм что и у W3C markup validator

Условно бесплатно офф-лайн:

• "A real validator" от WDG, это HTML валидатор под Windows. Регистрация стоит $25. Может проверять несколько HTML документов одновременно, а также поставляется с полной спецификацией HTML 4.0. Спецификация довольно удобна, снабжена примерами, объяснениями и другой полезной информацией.

5 самых распространённых ошибок, возникающих в процессе проверки и как с ними бороться

• некорректное вложение элементов
• неэкранированные амперсанды в URL: амперсанд (&) в адресе (URL) должен быть экранирован, т.е. заменён на &amp
• расположение элементов (блочный элемент вложен в линейный)
• пропуск элементов (например отсутствие <title> в секции <head>)
• пропуск атрибута alt в теге <img>
  Атрибут alt это текстовый эквивалент изображения. Он необходим, т.к. по многим причинам (проблемы с сетью, текстовый браузер, пользовательские установки) изображение может не отобразиться. Чтобы написать наиболее соответствующий текст в аттрибут alt представьте, например, как бы вы описали это изображение по телефону.

Как писать код, не используя популярные теги <font>,<center>,bgcolor

Я использую <font>. Как заменить <font> с помощью CSS?

Предназначение устаревшего тега FONT в установке шрифта, цвета и размера заключённого в него текста. Эта функция была перенесена из HTML в CSS. Элемент FONT заменяется на SPAN с указанием стиля:

<p><font color="blue" face="Helvetica">
Чисто конкретно <font size="+1">большой</font> ботинок. 
</font></p>

...становится

<p><span style="color: blue; font-family: Helvetica, sans-serif;"> 
Чисто конкретно <span style="font-size: larger;">большой</span> ботинок.
</span></p>

либо ещё короче:

<p style="color: blue; font-family: Helvetica, sans-serif;"> 
Чисто конкретно <span style="font-size: larger;">большой</span> ботинок.
</p>

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

Я использую <center> или align="center". Как выравнивать с CSS?

В спецификации CSS1 есть свойство text-align, определяющее каким образом текст или линейный элемент (например изображение) выравниваются внутри родительского элемента.

<p style="text-align: center;"><img src="..." width="..." 
height="..." alt="..."></p> 
// пример центрирования изображения внутри элемента

Свойства margin-left: auto; margin-right: auto; центрируют блочные элементы внутри родительского блока. margin-left и margin-right действуют на блочные элементы. Когда оба свойства определены как auto, то их значения устанавливаются в равные величины и соответственно блочный элемент центрируется внутри своего родителя.

Как заменить bgcolor? Как установить цвет фона с CSS?

Атрибут bgcolor можно заменить свойством CSS1 background-color

Если у вас было:

<td bgcolor="green" width="150">
   ... бла бла бла ...
</td>

... то становится:

<td style="background-color: green;" width="150">
   ... бла бла бла ...
</td>

Как писать код не используя теги <embed>, <applet>, <marquee>, <bgsound>

Что если я использую <embed> для встраивания flash или видео в свою веб страницу?

Статья на эту тему скоро будет выложена.

Что если я использую <applet>?

Как правильно встраивать Java-апплет в веб страницу описано в статье "Вставка Java-апплета c помощью тега <OBJECT>".

Что если я использую <marquee>?

Marquee (бегущая строка) можно заменить текстовой строкой внутри <div> или <span>. Прокрутка осуществляется с помощью Javascript и DOM1. Следует помнить, что подобные эффекты зачастую только раздражают пользователя. Исследования показали, что постоянно движущиеся объекты или текст мешают чтению и ослабляют периферическое зрение. Имитация marquee с помощью DHTML сильно нагружает процессор и забирает много оперативной памяти, а так же может привести слабые компьютеры к зависанию. Если же вы всё-таки хотите иметь на своей странице бегущую строку, то можете воспользоваться следующей рекомендацией:

Статья на эту тему скоро будет выложена.

Что если я использую фоновую музыку <bgsound>?

Тогда используйте HTML 4.01 OBJECT, т.е.:
<OBJECT data="audiofile.wav" type="audio/wav" ...></OBJECT>
Фоновая музыка часто сильно замедляет загрузку страницы; подобно бегущей строке (marquee) фоновый звук редко оправдан.
Как показывают опросы, 41.9% респондентов избегают сайтов, где используется фоновая музыка, а 71.1% пользователей этот эффект вообще очень раздражает.

Статья на эту тему скоро будет выложена.

Шаг3: Проверьте свой CSS код на соответствие стандартам

Где я могу протестировать свой CSS код?

Бесплатно он-лайн:

• W3C CSS Validation Service
• WDG CSS checker

Встроенный механизм проверки в современных браузерах:

• Консоль ошибок в Firefox 1.5.x и Firefox 2.x. Меню Инструменты/Консоль ошибок (Tools/Error console).
• Консоль ошибок в Opera 9. Меню Инструменты/Дополнительно/Консоль ошибок (Tools/Advanced/Error console).
• Консоль ошибок в Icab 3.03. Меню Настройки/Показать все/Другие/Отчёт об ошибках (Preferences/Show All/Other/Error report).

Использование W3C DOM

Объект document во многих браузерах имеет свойства для доступа к массиву его элементов и типов элементов. document.all[], например, используется MSIE для доступа к конкретному элементу внутри документа. Многие из этих массивов не являются частью спецификации W3C для Объектной Модели Документа (DOM) и вызывают ошибки JavaScript в следующих стандартам браузерах, например, Mozilla,Firefox и Netscape 7+.

Объектная Модель Документа W3C представляет практически все элементы HTML страницы как объекты, доступные при программировании на JavaScript, JScript, etc.. Атрибуты и методы W3C DOM являются более мощными, чем соответствующие им методы и атрибуты собственных объектных моделей документов браузеров. Атрибуты и методы W3C DOM полностью поддерживаются всеми современными браузерами - MSIE 6+,Opera 8+, Safari 1.x, Konqueror 3.x, и браузерами из семейства Mozilla (Firefox, Seamonkey, Netscape 7+, Camino), поэтому нет смысла использовать собственные DOM браузеров.

Нестандартные свойства объектных моделей документов

Следующие свойства объекта document не поддерживаются W3C DOM:

• document.layers[]
• идентификатор_элемента
• document.all
• document.all.идентификатор_элемента
• document.all[идентификатор_элемента]

Следующие свойства форм (из собственной DOM Inernet Explorer) не поддерживаются W3C DOM:

• FormName.InputName.value
• InputName.value
• FormCtrlName
• document.forms(0)

Скрипты, использующие эти свойства, не будут работать в FireFox, Mozilla и Netscape 7+ и в любых других ,следующих стандартам браузерах. Вместо них используйте W3C DOM атрибуты и методы из следующего раздела, т.к. они тоже поддерживаются Internet Explorer-ом, соотв-но нет причин использовать MSIE-ориентированные атрибуты и методы.

Доступ к элементам веб страницы с помощью W3C DOM

Наилучший и наиболее поддерживаемый способ для доступа к элементу в HTML - это использование document.getElementById(идентификатор_элемента). Очень широкий круг браузеров (NS 7+, Mozilla, MSIE 5+, Firefox, Opera 6+, Safari 1.x, Konqueror 3.x, etc.) поддерживает метод getElementById(идентификатор_элемента). Этот метод возвращает ссылку на уникальный элемент (элемент с уникальным идентификатором) в документе, которая затем может быть использована для работы с этим элементом. Например, нижеследующий короткий пример динамически устанавливает левую границу элемента <div>, c уникальным идентификатором "inset", равной половине дюйма:

// HTML: <div id="inset">Какой-то текст</div>
document.getElementById("inset").style.marginLeft = ".5in";

Для доступа к группе элементов спецификация DOM включает в себя метод getElementsByTagName("название тега"), который возвращает список всех элементов с указанным тегом в порядке их появления в документе:

var arrCollection_Of_Anchors = document.getElementsByTagName("a");
var objFirst_Anchor = arrCollection_Of_Anchors[0];
alert("Адрес первой ссылки  " + objFirst_Anchor.href);

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

Управление Содержимым и Способом Отображения (Стилями) Документа

Изменение стиля элемента используя DOM

Нижеследующая таблица описывает стандартизованные методы для доступа и изменения стилей. См. рекомендации W3C DOM2, расширенный интерфейс CSS2

Для установки нового значения свойству CSS элемента DOM2 предоставляет ссылку на объект style: ElemRef.style (где ElemRef - ссылка на элемент). Ссылку на элемент можно получить, используя метод DOM getElementById либо один из других методов, описанных выше в разделе "Доступ к элементам веб страницы с помощью W3C DOM".

Отражение стилевых свойств элемента в W3C DOM2

Помните, что в соответствии с Рекомендацией W3C, свойства объекта style элемента отражают только те стили, которые установлены статически (т.е. непосредственно в атрибуте STYLE элемента), а не все наследуемые стили родительских элементов. Поэтому, если вы хотите прочитать или установить эти свойства из JavaScript и DOM2, используйте один из следующих подходов:

• Устанавливайте все определения стиля (если они есть вообще) статически, т.е. в атрибут STYLE элемента.
• Либо вообще не используйте непосредственное указание стилей, а добавляйте стили динамически из JavaScript и DOM

Отражение стилевого позиционирования элемента в W3C DOM2

Значения, возвращаемые свойствами из W3C DOM2 style.left и style.top это строки, включающие в себя единицу измерения CSS (например "px"), тогда как IE5+ ElemRef.style.pixelLeft (и соответствующее св-во pixelTop) возвращают целочисленное значение. Так что, если вы хотите получить статически установленные значения STYLE для left и top как целые, то необходимо выделить числовую часть из строки с помощью функции parseInt(). И, соответственно, наоборот, если вы хотите установить статически (через атрибут STYLE элемента) св-ва left и top, то убедитесь, что к числовому значению вы добавили и единицы измерения (например "140px").

Спецификации CSS1 и CSS2 требуют, чтобы всякое ненулевое значение сопровождалось единицей измерения, иначе css-свойство будет игнорировано. Браузеры из семейства Mozilla, MSIE6+, Opera 7+ и другие следующие стандартам браузеры осуществляют проверку на подобные ошибки.

Изменение текстового содержимого элемента, используя DOM

В DOM изменение текстового содержимого элемента существенно отличается от обычного представления об этом процессе. Содержимое каждого элемента представляется в виде набора дочерних узлов (nodes), содержащих обычный текст и элементы вложенные в данный. Для того чтобы изменить текст внутри элемента скрипт оперирует узлами. Узловая структура и соответствующие методы определены в рекомендации W3C DOM1. Если у элемента нет вложенных в него элементов, а только текст, то он имеет (обычно) один дочерний узел, доступный как ElemRef.childNodes[0]. В этом частном случае стандартизованным эквивалентом свойства ElemRef.innerText будет W3C ElemRef.childNodes[0].nodeValue. Следующий пример показывает, как модифицировать текст внутри элемента SPAN, который уже существует в HTML файле.

<body>
  <P>Папочка <SPAN id="dynatext">очень занервничал</SPAN>!</P>

  <script type="text/javascript">
    // получаем ссылку на элемент SPAN
    var SpanElemRef = document.getElementById("dynatext");

    // аналог SpanElemRef.innerText = "купил клёвую барсетку"
    var new_txt = document.createTextNode("купил клёвую барсетку");
    SpanElemRef.replaceChild(new_txt, SpanElemRef.childNodes[0]);

    // тоже самое, но немного грубым способом
    //(не будет работать, если childNodes[0] не является текстовым узлом)
    SpanElemRef.childNodes[0].nodeValue = "купил клёвую барсетку";

    // аналог SpanElemRef.innerHTML = "купил <b>клёвую</b> барсетку"

    var new_el = document.createElement(SpanElemRef.nodeName);
    new_el.appendChild(document.createTextNode("купил "));
    var bold_el = document.createElement("B");
    bold_el.appendChild(document.createTextNode("клёвую"));
    new_el.appendChild(bold_el);
    new_el.appendChild(document.createTextNode(" барсетку"));
    SpanElemRef.parentNode.replaceChild(new_el, SpanElemRef);
  </script>
</body>

Первый пример показывает относительно простой метод замены текста в SPAN -подстановкой нового текстового узла вместо исходного. Здесь принято допущение, что SPAN имеет один узел - текстовый; код будет работать, даже если это не так, но результаты могут быть неожиданными.

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

Последний пример показывает технику, эквивалентную присваиванию значения свойству innerHTML. Сначала создаётся новый элемент такого же типа, как и оригинал - SPAN. Затем к нему добавляется три дочерних узла: начальный текстовый, элемент B со своим собственным текстовым узлом и конечный текстовый узел. Затем скрипт обращается к родителю элемента (элемент P), и подставляет вновь созданный элемент SPAN на место оригинального в списке дочерних узлов родительского элемента P.

Понятно, что переделка скриптов для изменения содержимого документа под DOM - не тривиальное дело. Преимущество же подобной переделки в том, что скрипт будет работать во всех современных W3C DOM-совместимых браузерах, таких как Netscape 6/7 и других на движке Gecko. Требования обратной совместимости, однако, не только откладывают, но и существенно усложняют программирование под разные платформы.

Разработка Кроссбраузерных/Кроссплатформенных веб страниц

Важным моментом при разработке кроссбраузерных и кроссплатформеных страниц и DHTML скриптов является определение возможностей браузера, который загружает вашу веб страницу. Как вебмастер, вы ,конечно, хотите избежать ошибок скриптов и проблем с отображением страницы и ,скорее всего, хотите расширить возможности ваших скриптов под максимальную аудиторию пользователей. Известно два подхода для достижения этих целей: определение типа и версии браузера (также известный как определение по строке userAgent) и определение объектно/функциональных возможностей. Метод с определением браузера - сложный, ненадёжный и трудно обновляемый.

Подход через определение браузера: не лучший и ненадёжный

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

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

Давайте взглянем на пример такого подхода.

if (navigator.appVersion.charAt(0) == "7")
{
   if (navigator.appName == "Netscape")
   {
     isNS7 = true;
     alert("NS7");
   };
}
else if (navigator.appVersion.indexOf("MSIE") != -1)
   {
    isIE = true;
    alert("IE");
   };

Другая, большая проблема в этом подходе в том, что браузер может "обмануть" проверочный скрипт. У многих современных браузеров свойства navigator.appVersion и navigator.userAgent могут быть изменены пользователем по его усмотрению. Например,

• Пользователи FireFox 1.x и пользователи любого браузера из семейства Mozilla могут заменить свойство "general.useragent.*" на любое
• Opera 6+ позволяет пользователям устанавливать строку идентификации браузера через меню
• MSIE использует реестр Windows, который тоже можно редактировать
• Safari и Icab вообще часто маскируются под Internet Explorer или Netscape

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

Итак, если такой способ ненадёжен и сложен, как же тогда верстать под разные браузеры и разные версии? ...

Использование подхода через определение Объектно/Функциональноых возможностей: наилучший и самый надёжный способ

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

Давайте взглянем на пример объектно/функционального подхода.

function hideElement(id_attribute_value)
{
   if (document.getElementById &&
         document.getElementById(id_attribute_value) &&
            document.getElementById(id_attribute_value).style)
   {
   document.getElementById(id_attribute_value).style.visibility="hidden";
   };
}

// например:
// <button type="button" onclick="hideElement('d1');">скрыть div</button>

// <div id="d1">Какой-нибудь текст</div>

Таким образом, вместо попыток узнать какой браузер и какая его версия поддерживают нужный вам DOM метод (или атрибут или свойство), вы можете просто проверять поддерживается ли данный метод в данном браузере. С этим подходом вы получаете гарантию, что все браузеры, включая будущие и включая те, у которых строка userAgent вам неизвестна, будут корректно работать с вашим кодом.

Резюме

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

1. Using Web Standards in your Web Pages