Спецификация HTML и JavaScript для различных браузеров

Источник: webobzor.net

Одним из критериев эффективности работы сайта является кроссплатформенность интерфейса, или, другими словами, одинаковое отображение сайта различными браузерами. К сожалению, начинающие веб-дизайнеры, как правило, уделяют незначительное внимание созданию качественного кода, и пишут сайты исключительно под Internet Explorer, несмотря на то, что в последнее время количество пользователей, которые используют такие браузеры как Opera, Mozilla и Netscape Navigator, значительно увеличилось.

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

1. При описании классов стилей для объекта, не ставьте знак ";" после описания.

Пример (неправильный):

<style>
.aq {color: red};
.aw {color: blue};
</style>

<div class=aq>Hello</div>
<div class=aw>Hello</div>

Internet Explorer без проблем выдаст одну надпись красным цветом, а другую синим. Другие браузеры не поймут такого описания, они будут считать, что раз после описания .aq {color: red} стоит знак ";" значит уже описаны ВСЕ стили, и следующие описания, после этого, учитываться не будут. То же самое касается описания стилей в файле css.

Пример (правильный):

<style>
.aq {color: red}
.aw {color: blue}
</style>

<div class=aq>Hello</div>
<div class=aw>Hello</div>

2. Не используйте метод document.all и схожие с ним. Расcмотрим простой пример.

Пример (неправильный):

<script language=javascript>
function godiv() {
document.all("cap").style.left=30;
};
</script>

<div id=cap style='position: absolute'>Hello</div>
<input type=button value='Go' onclick='godiv()'>

Все просто. Нажимаем на кнопку, надпись смещается вправо. Запускаем под IE, Opera, Mozilla - все замечательно. Запускаем под Nescape Navigator, надпись стоит на месте. Согласно стандартам HTML, для обращения к свойствам объекта используется метод getElementById. Правильным будет следующее использование данного метода: Пример (правильный):

<script language=javascript>
function godiv() {
document.getElementById("cap").style.left=30;
};
</script>

<div id=cap style='position: absolute'>Hello</div>
<input type=button value='Go' onclick='godiv()'>

3. Названия методов должны начинаться с прописной буквы. Нет таких методов, как All или GetElementByID, но есть all и getElementById.

4. Не используйте прямое обращение к свойствам объекта.

Пример (неправильный):

<script language=javascript>
function godiv() {
cap.style.background="#C0C0C0";
};
</script>
<div id=cap style='position: absolute'>Hello</div>
<input type=button value='Go' onclick='godiv()'>

IE, Opera и Mozilla поменяют цвет фона объекта div на серый. Netscape Navigator не сделает этого! Поэтому, будьте добры, пишите правильно с использованием ранее описанного метода getElementById:

Пример (правильный):

<script language=javascript>
function godiv() {
document.getElementById("cap").style.background="#C0C0C0";
};
</script>

<div id=cap style='position: absolute'>Hello</div>
<input type=button value='Go' onclick='godiv()'>

5. Фильтры - исключительно выдумка Internet Explorer.

Пример:

<img src=menu.jpg style='filter: gray()'>

Все остальные браузеры, за исключением IE, будут отображать ЦВЕТНУЮ картинку.

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

Пример:

<div style='cursor: hand'>Hello</div>

В IE и Opera при наведении на объект div курсор будет изменяться, в Mozilla и Netscape - нет. Почему, великая загадка разработчиков :)

7. Самое главное правило. НЕ УЧИТЕ спецификацию КАЖДОГО КОНКРЕТНОГО БРАУЗЕРА в отдельности. ИЗУЧАЙТЕ ОБЩИЙ СТАНДАРТ применения языка HTML для написания веб страниц.