«Хорош для всех» — как создать сайт для всех браузеров?

Мой Компьютер, №30 (534), 15.12.2008

Чтобы разобраться, в чем суть да дело, обратимся к истории. Когда были разработаны основы построения Всемирной Паутины, один из ее создателей, Тим Бернерс-Ли, для хранения в ней документов придумал простой текстовый формат. В нем разметка документов осуществлялась при помощи тэгов. Язык был назван HTML, и именно с того времени берет свое начало веб-разработка.

Изначально веб-страницы отличались от обычных документов только наличием гиперссылок. Графики и интерактивных элементов на них и в помине не было, а язык состоял из малого количества самых основных тэгов (<a>, <b>, <i>, <u>, <br> и т.д.).

Время шло, интернет-софт развивался. Появились браузеры, поддерживающие графику, был разработан интерфейс CGI. Так в язык разметки попали тэг <img>, тэги HTML-форм — <form>, <input>, <select>и другие.

Дальнейшее развитие Интернета принесло очередные новшества в язык HTML. Но все эти нововведения делались абсолютно несогласованно. Осознавая преимущество Сети, фирмы-разработчики браузеров старались как можно быстрее «втиснуть» новинку, и до выпуска новой версии своего продукта сохранить ее втайне от конкурентов. В результате, когда Консорциум WWW (w3c.org) открыл свое первое заседание по стандартизации языка HTML, его почетные члены, схватились за головы. Ибо единого HTML не было, была куча его реализаций от разных фирм и для разных браузеров.

В результате долгой и упорной работы Консорциума были приняты стандарты: HTML 2.0, HTML 3.2, HTML 4.0, XHTML. Но отголоски строительства той «вавилонской башни» дошли и до сегодняшних дней. Ибо разработанные стандарты не носят императивного характера, они всего лишь рекомендации для разработчиков. Часть браузеров начала следовать стандартам w3c (Opera, Firefox, Safari, Konqueror), другая же часть продолжила упорно «гнуть свою линию». Ну, а создатели одного из популярных сегодня браузеров вообще решили стандарты «подмять» под себя (я думаю, все догадались, о каком продукте идет речь J).

Итак, можно назвать следующие причины несовместимости браузеров:

• разная степень соответствия стандартам w3c;
• разная интерпретация тэгов и их параметров;
• разные алгоритмы анализа и обработки документов.

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

На что ориентироваться?

Сделать сайт, который будет совершенно одинаково отображаться во всех существующих браузерах, невозможно. Да и не нужно. Какой смысл добиваться нормального отображения страницы, скажем, в iCab (альтернатива Safari на платформе Macintosh), если его используют (по данным на май этого года) меньше 0.01 % пользователей? При посещаемости ресурса в 10000 хостов в день только 1 человек может увидеть «поплывший» дизайн. Но совершенно другое дело, если сайт криво отображается в Internet Explorer, занимающем около 74 % рынка браузеров. Уже 7400 человек изо дня в день будут наблюдать глюки, и вероятно, большая их часть перестанет быть аудиторией сайта.

Следовательно, надо ориентироваться только на самые популярные браузеры. Таковыми на данный момент являются:

Internet Explorer — 73.75 %, Firefox — 18.41 %, Safari — 6.37 %, Netscape — 0.62 %, Opera — 0.71 %.

Наша основная задача — добиться, чтобы в этих пяти браузерах страница выглядела одинаково.

На ошибках учатся

Большая часть проблем с некорректным отображением возникает, если в структуре документа допущены ошибки:

• незакрытые тэги;
• лишние закрывающие тэги;
• пропущена закрывающая кавычка в значении параметра;
• специальные символы записаны в незакодированном виде и т.п.

Происходит это из-за того, что разные браузеры построены на разных «движках», у каждого из которых свои алгоритмы обработки ошибок в документе. Согласно стандартам w3c ошибочный тэг должен быть проигнорирован. Но некоторые браузеры могут на основе анализа кода попытаться определить, например, в каком месте следует закрыть незакрытый тэг. Соответственно, вполне вероятно, что в таких браузерах страничка отобразится корректно, в остальных же она заведомо отобразится с ошибками.

Поэтому тщательно проверяйте синтаксис HTML-кода. В некоторых редакторах (например, в ActiveState Komodo Edit) есть встроенный синтаксический анализатор, не гнушайтесь пользоваться им и следовать его рекомендациям.

Стандартизация

Отсутствие ошибок на странице еще не гарантирует того, что она будет кросс-браузерной. Чтобы браузер корректно отобразил страницу, он в первую очередь должен знать, какому из стандартов (HTML 4.01, XHTML) она соответствует. Стандарт определяется на основе анализа исходного кода. Но не факт, что он будет определен правильно. Поэтому может возникнуть ситуация, когда браузер станет интерпретировать страничку, написанную в XHTML, как HTML 4.01 (или наоборот). Естественно, о корректном отображении содержимого в данном случае не может быть и речи. Вероятность неверного определения стандарта для страницы тем больше, чем меньше ее код этому самому стандарту соответствует. Это — очень распространенная ошибка среди новичков-копипастеров. Склепанные из кусочков, взятых из разных источников, такие страницы-«франкенштейны» представляют собой жуткую смесь из HTML и XHTML. Каково бедному браузеру разбираться, как же этот ужас следует интерпретировать?! Поэтому правилом хорошего тона считается идти интернет-обозревателям навстречу, а именно:

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

Теперь кратко рассмотрим стандарт XHTML 1.0. Для более подробного ознакомления с этим и другими стандартами я рекомендую прочитать официальные документы Консорциума w3c.

Итак, XHTML — это язык, который по возможностям похож на HTML, но создан на базе XML. Его синтаксис намного строже, чем у HTML, но благодаря этому алгоритмы его анализа и парсинга проще, а скорость интерпретации — выше.

По синтаксису язык очень похож на XML, а именно:

• абсолютно все тэги XHTML закрываются (даже те, которые в HTML не имели закрывающего тэга) — <a> <a>, <img src=”” alt=”” />, <br />;
• одиночные параметры тэгов записываются в развернутой форме — <option selected=”selected”>, <td nowrap=”nowrap”>;
• имена тэгов и параметров записываются в нижнем регистре — <a href=, а не <A HREF=;
• все специальные символы должны быть закодированы — & lt, & amp вместо < и &;
• оформление документа должно быть отделено от содержания и осуществляться только средствами CSS;
• у всех изображений должен быть параметр alt;
• элементы-блоки (<div>, <p>) не могут быть вложены во внутристрочные элементы (<a>, <span>, <b>).

Для указания формата документа используется специальный тэг DTD (Document Type Definition), который должен размещаться строго в начале документа, перед тэгом <html> (см. таблицу).

Рис. 1. Сейчас мы будем сдавать экзамен по знанию HTML. И не кому-нибудь — самому Консорциуму W3C!

Дополнительно к указанию типа документа для XHTML необходимо указать пространство имен в параметре xmlns тэга <html> :

<html dir=»ltr» xml:lang=»ru» xmlns=»http://www.w3.org/1999/xhtml» lang=»ru»>

Для автоматической проверки сайта на соответствие стандартам (валидации) существует специальная онлайновая служба Консорциума W3C (см. Полезные ссылки). Для валидации необходимо всего лишь ввести URL-странички (включая http://) в поле ввода и кликнуть на кнопку Check (рис. 1).

Сервис автоматически проанализирует код документа и выведет список ошибок и предупреждений с подробными комментариями к ним (рис. 2).

Рис. 2. А вот и экзаменационная ведомость с результатами. Все ошибочки аккуратно подчеркнуты…

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

Ну, а когда вы доведете сайт до соответствия стандартам, то сможете похвастаться этим перед всеми его посетителями, разместив небольшую (88х31) кнопочку с соответствующим сообщением. Ее код и инструкции по размещению можно получить здесь: http://validator.w3.org/docs/help.html#icon, а пролистать коллекцию кнопок-индикаторов валидности — здесь: http://www.w3.org/QA/Tools/Icons.

(Окончание следует)

Robo User
Web-droid редактор

     

Читайте також