1. На що орієнтуватися?
2. На помилках вчаться
3. стандартизація

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

Щоб розібратися, в чому суть та діло, звернемося до історії. Коли були розроблені основи побудови Всесвітньої Павутини, один з її творців, Тім Бернерс-Лі, для зберігання в ній документів придумав простий текстовий формат. У ньому розмітка документів здійснювалася за допомогою тегів. Мова була названа HTML, і саме з того часу бере свій початок в бізнес-процеси.

Спочатку веб-сторінки відрізнялися від звичайних документів тільки наявністю гіперпосилань. Графіки та інтерактивних елементів на них і в помині не було, а мова складався з малої кількості самих основних тегів (& lt; a & gt ;, & lt; b & gt ;, & lt; i & gt ;, & lt; u & gt ;, & lt; br & gt; і т.д .).

Час минав, інтернет-софт розвивався. З'явилися браузери, які підтримують графіку, був розроблений інтерфейс CGI. Так в мову розмітки потрапили тег & lt; img & gt ;, теги HTML-форм - & lt; form & gt ;, & lt; input & gt ;, & lt; select & gt; і інші.

Подальший розвиток Інтернету принесло чергові нововведення в мову 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 не мали закриває тега) - & lt; a & gt; & Lt; a & gt ;, & lt; img src = "" alt = "" / & gt ;, & lt; br / & gt ;;

• поодинокі параметри тегів записуються в розгорнутій формі - & lt; option selected = "selected">, & lt; td nowrap = "nowrap">;

• імена тегів і параметрів записуються в нижньому регістрі - & lt; a href =, а не & lt; A HREF =;

• всі спеціальні символи повинні бути закодовані - & lt, & amp замість & lt; і & amp ;;

• оформлення документа повинно бути відокремлене від змісту і здійснюватися тільки засобами CSS;

• у всіх зображень повинен бути параметр alt;

• елементи-блоки (& lt; div & gt ;, & lt; p & gt;) не можуть бути вкладені у внутрістрочние елементи (& lt; a & gt ;, & lt; span & gt ;, & lt; b & gt;).

Для вказівки формату документа використовується спеціальний тег DTD (Document Type Definition), який повинен розміщуватися строго на початку документа, перед тегом & lt; html & gt; (Див. таблицю).

Мал. 1. Зараз ми будемо складати іспит зі знання HTML. І не кому-небудь - самому Консорціуму W3C!

Додатково до вказівки типу документа для XHTML необхідно вказати простір імен в параметрі xmlns тега & lt; html & gt; :

& Lt; html dir = "ltr" xml: lang = "ru" xmlns = "http://www.w3.org/1999/xhtml» lang = "ru" & gt;

Для автоматичної перевірки сайту на відповідність стандартам (валідації) існує спеціальна онлайнова служба Консорціуму 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.

(Далі буде)