Спецификация 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>
Пример (правильный):
<style>
.aq {color: red}
.aw {color: blue}
</style>
<div class=aq>Hello</div>
<div class=aw>Hello</div>
Пример (неправильный):
<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()'>
<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()'>
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()'>
Пример (правильный):
<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()'>
Пример:
<img src=menu.jpg style='filter: gray()'>
Все остальные браузеры, за исключением IE, будут отображать ЦВЕТНУЮ картинку.6. Одни свойства объектов, которые используются в одних браузерах, не обязательно будут поддерживаться другими браузерами.
Пример:
<div style='cursor: hand'>Hello</div>
В IE и Opera при наведении на объект div курсор будет изменяться, в Mozilla и Netscape - нет. Почему, великая загадка разработчиков :)7. Самое главное правило. НЕ УЧИТЕ спецификацию КАЖДОГО КОНКРЕТНОГО БРАУЗЕРА в отдельности. ИЗУЧАЙТЕ ОБЩИЙ СТАНДАРТ применения языка HTML для написания веб страниц.
