Межбраузерная совместимость

Пит Гуллексон, www.thedevweb.com

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

HTML первоначально не был предназначен для использования  в сайтах с обилием графики, которые мы видим сегодня. Фактически, его первая версия даже не включала поддержку графики или таблиц! Он был создан для передачи форматированного текста, а не создания огромных мультимедийных порталов. Это вело к мокрому языку повышения, зараженному недостатком любых строгих требований синтаксиса, предписанных браузерами. Если бы Netscape, IE, Опера, и другие браузеры удовлетворяли набору стандартных рекомендаций, Интернет был бы счастливым местом.

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

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


Тестирование, тестирование и еще раз тестирование

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


Размеры таблицы

Трижды проверьте размеры таблицы, чтобы потом не вознико проблем. Если Вы определили таблицу шириной в 100 пикселей, а ширина ячеек составляет в целом 120 пикселей, результаты могут быть нежелательными. Более новые версии IE обычно обрабатывают такую ситуацию нормально, но с Netscape будут проблемы.


Вложенные таблицы

В Netscape имеются проблемы со вложенными таблицами. Часто цвет фона/изображения отличается от того, чего можно было ожидать и на что можно было надеяться. Даже если Вы определили цвет фона вложенной таблицы, она унаследует фоновое изображение основной таблицы. Netscape дает фоновым изображениям более высокий приотритет чем цветам, даже если контекст их использования является различным. Чтобы обойти это препятствие, Вы можете устанавливать background="" и bgcolor="ваш цвет" в  ячейке. Это должно помешать Netscape закрыть ваш bgcolor фоновым рисунком.


Стилевые таблицы

CSS дает дизайнеру намного больше возможностей управлять различными свойствами текста. К сожалению, некоторые свойства плохо поддерживаются определенными браузерами. В целом, новые версии IE лучше обрабатывают CSS, чем Netscape. Однако, самый последний выпуск Netscape (версия 6) поддерживает значительно большее число свойств. Посмотрите справочник по CSS, который содержит информацию о поддержке каждого свойства различными браузерами: http://www.webreview.com/style/css1/charts/mastergrid.shtml


Тэг <FORM>

Всегда используйте закрывающий тэг </FORM>. ВСЕГДА. Netscape не будет отображать ни один из элементов формы, если Вы опустите закрывающий тэг. Запишите это. Вбейте себе в голову. Сделайте все, чтобы запомнить это.


Правильный синтаксис

Как и в любом другом компьютерном языке, автор должен потратить время и эффективно писать код, имеющий смысл. За правильный синтаксис Вам воздастся по заслугам. Это гораздо более последовательно чем 'сырой' код, но, самое главное, это предотвращает множество проблем с предоставлением в различных браузерах. Когда я говорю о правильном синтаксисе, я имею ввиду параграфы, закрывающиеся тэгом </p>, должным образом вложенные друг в друга тэги (<tag1><tag2></tag2></tag1>), заключение атрибутов в кавычки (text="this", а не text=this) и все остальное, что влечет за собой создание "правильных" документов. Есть также редакторы HTML, которые проверят ваш синтаксис. Macromedia Dreamweaver, например, проверяет ваш синтаксис во время написания кода. Найденные ошибки будут подсвечены желтым, так что Вы можете делать надлежащие исправления.

Утилиты, проверяющие ваши документы HTML:

http://validator.w3.org/
Ресурс для проверки страницы в on-line на соответствие стандарту HTML, установленным W3C.

http://www.w3.org/People/Raggett/tidy/
Программа, которая проверит файл на соответствие стандарту, также, как и описанный выше сайт.

http://www.htmlvalidator.com/
Эта программа также проверит ваш исходный текст HTML.

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


Одно заключительное слово

Когда Вы создаете ваш сайт, чтобы он был совместимым, удостоверьтесь, что Вы имеете представление о вашей аудитории. Thedevweb.com, например, имеет симпатичную здравомыслящую аудиторию, так что можно безопасно предположить, что почти все  посетители используют IE4/NS4+ браузеры. Несомненно, могут быть случайные пользователи IE3, но стоит ли писать дополнительный код, если они составляют 0.02% вашего трафика? Вам решать.