Выбор нужного режима отображения с помощью декларации Doctype

Чтобы иметь дело как с мешаниной тегов, написанной еще ради причуд старых браузеров, так и с новыми CSS-совместимыми страницами, Firefox (и другие Mozilla-подобные браузеры на движке Gecko), Safari, Opera (7 и выше), Internet Explorer 6 и 7, Mac IE 5 и Konqueror (3.2 и выше) имеют два основных режима отображения. В одном режиме графический движок браузера пытается отрисовать страницу согласно спецификациям CSS. В другом режиме он пробует имитировать старые браузеры. В Firefox эти режимы известны как «Standards mode» и «Quirks mode» соответственно. Здесь и далее эти термины используются также по отношению к режимам других браузеров.

Предыстория

Баги и нестандартное поведение старых браузеров вроде Netscape Navigator 4.x и IE 5 для Windows получили название «quirks» (букв. капризы, причуды). Пример такой «причуды» – сброс наследования стилей внутри таблицы. Иногда страницы специально создавались с расчетом на такие причуды.

Большинство «квирков» относятся к отображению, противореча CSS. Если отображать «заточенные» под них страницы по правилам CSS, то они бы выглядели совсем не так, как того хотели их авторы. С другой стороны, возможность использовать CSS согласно спецификации – большой шаг вперед по сравнению с необходимостью вечно подстраиваться под старые «причуды».

Режимы отображения

Чтобы решить обе взаимоисключающие задачи – добиться как обратной совместимости, так и соответствия стандарту CSS – у современных браузеров есть два или три режима отображения.

Quirks Mode (тж. «режим обратной совместимости», но чаще не переводится – прим. перев.)

В Quirks mode браузеры нарушают спецификации CSS, чтобы добиться отображения примерно как у их предшественников. Разные браузеры воспроизводят разные «причуды», поэтому Quirks mode у них тоже разный. Напр., Mozilla изначально была нацелена на имитацию Netscape 4.x, тогда как Windows IE 6 и 7 пытаются имитировать IE 5.

Задача этого режима – избежать «развала» старых страниц. Если вы создаете новые страницы, то предполагается, что вы будете соблюдать соотв. спецификации (в частности, CSS 2.1) и ориентироваться на стандартный режим.

Standards Mode (стандартный, или строгий режим)

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

Almost Standards Mode («почти стандартный» режим)

Firefox, Safari и Opera 7.5 (и выше) имеют еще и третий режим, известный как «Almost Standards mode», в котором вертикальные размеры ячеек таблицы ведет себя не в строгом соответствии со спецификацией CSS2, а «по старинке» (напр., под картинками в ячейках не возникает характерных для стандартного режима отступов – прим. перев.). Mac IE 5, Windows IE 6 и 7, Opera до 7.5 и Konqueror не нуждаются в таком режиме, потому что в их «стандартных режимах» ячейки таблиц и так ведут себя не строго по спецификации CSS2. По сути, стандартный режим этих браузеров ближе к «почти стандартному» режиму Мозиллы, чем к ее стандартному режиму. Важно помнить, что однотипные режимы разных браузеров не идентичны друг другу (хотя, по задумке, должны были быть одинаковыми).

Парсинг (синтаксический разбор)

Мешанина тегов (в оригинале «Tag soup», букв. «Суп из тегов» – прим. перев.) – термин для HTML-подобной «стряпни», не являющейся валидным HTML. Обычно такое возникало  в связи с ошибочным отношением к HTML как языку программирования страницы, коим он на деле не является. Старые браузеры терпели мешанину тегов. Новые браузеры тоже не могут ее просто отбросить из-за доставшегося им в наследство такого контента, и поэтому разбирают все, что сервер выдает под HTTP-заголовком Content-type=text/html, с помощью парсера для мешанины тегов. Тем не менее, использовать кривой HTML рискованно. Мешанина тегов «не дружит» со стилями и с DOM.

Построение логичного дерева документа из разметки с неправильной вложенностью тегов требует определенных трюков, без которых можно было бы обойтись, будь весь контент заведомо валидным HTML. Обычно такие трюки (подробности зависят от конкретного парсера) не мешают разбору правильно построенных страниц. Поскольку подавляющее большинство документов с Content-type=text/html содержит ошибки, такие трюки парсинга мешанины тегов продолжают работать и при использовании стандартного режима отображения.

Есть также несколько «квирков», влияющих на парсинг HTML и CSS и способных привести к неправильному разбору правильно построенных страниц. Эти «причуды» включаются и выключаются вместе с «причудливым» отображением. Однако, важно четко понимать, что противопоставление «Quirks mode» и «Standards mode» касается главным образом отображения, а не парсинга.

Многие ошибочно считают стандартный режим «режимом строго парсинга», думая, что он заставляет браузеры считаться с правилами синтаксиса HTML и что браузеры в нем способны оценивать правильность разметки. Ничего подобного. Браузеры продолжают «чинить» мешанину тегов соответствющими трюками даже тогда, когда действует стандартный режим отображения (в 2000-м, до выхода Netscape 6, у Мозиллы действительно были режимы парсера с принудительной проверкой синтаксиса, но они оказались несовместимы с суровой действительностью и от них пришлось отказаться).

Другое распространенное заблуждение связано с парсингом XHTML. Многие считают, что само указание XHTML-ного Doctype приводит к другому парсингу. Это не так. XHTML-документы, отданные сервером с Content-type=text/html, разбираются тем же парсером мешанины тегов, что и HTML. С точки зрения браузеров, такой XHTML является всего лишь мешаниной тегов со странными добавками (в оригинале «tag soup with croutons», «суп из тегов с гренками» – прим. перев.), вроде лишних слешей и т.п. Только документы с XML-ным Content-type (напр., application/xhtml+xml или application/xml) подвергаются разбору по XML-правилам. 

Управление режимом отображения с помощью Doctype (в оригинале «Doctype Sniffing», букв. «вынюхивание Doctype» – прим. перев.), или Doctype-переключатель

Firefox, Safari, Opera (7 и выше), Windows IE 6 и 7, Mac IE 5 и Konqueror (3.2 и выше) – все они смотрят на Doctype, чтобы выбрать режим отображения для документов с Content-type=text/html. Это значит, что режим выбирается на основе объявления типа документа (или его отсутствия) в начале HTML-страницы. А документы, отданные сервером с XML-ным Content-type, всегда отображаются в стандартном режиме.

Объявление типа документа (doctype) содержит имя (основной идентификатор) корневого элемента и ссылку на DTD (document type definition – определение типа документа), которое, в свою очередь, содержит информацию о синтаксических правилах для этого документа (в теории, внутрь объявления можно запихать и само DTD целиком, но на практике на него лишь ссылаются). В спецификации HTML сказано, что объявление типа документа нужно для получения информации о версии HTML. Но несмотря на название «объявление типа документа» и несмотря на то, что говорит спецификация HTML, объявление типа документа – не самое подходящее средство для проверки принадлежности  SGML- или XML-документа к определенному типу, хотя, казалось бы, именно для этого оно и придумано (судя по названию). Более подробно об этом – в конце статьи.

Ни спецификация HTML 4.01, ни стандарт ISO 8879 (SGML) ничего не говорят об использовании Doctype в качестве переключателя режимов отображения. «Вынюхивание Doctype» основано на наблюдении, что подавляющее большинство документов с «причудами» на тот момент либо не имели Doctype, либо содержали в нем ссылки на устаревшие DTD.

Типичное объявление типа документа состоит из строки «<!DOCTYPE», имени корневого элемента («HTML»), строки «PUBLIC», публичного идентификатора DTD в кавычках, возможно – системного идентификатора (URL) этого же DTD и символа «>» (все через пробел). Doctype размещается в документе до открывающего тега корневого элемента.

Действие некоторых Doctype

В приведенной в оригинальной статье таблице «Quirks Mode», «Standards Mode» и «Almost Standards Mode» обозначены как Q, S и A соответственно. Если у браузера только два режима, стандартный режим обозначен как S, если ячейки таблиц в нем ведут себя как стандартном режиме Мозиллы, и как A – если они работают как в ее «почти стандартном» режиме.

Цель таблицы – не предложить на выбор все перечисленные Doctype для новых страниц. Ее цель – показать, на каких данных основаны рекомендации автора. Практические советы идут после таблицы.

В заголовках столбцов использованы следующие сокращения:

NS6 – Mozilla 0.6…0.9.4 и Netscape 6.0…6.2.3
Old Moz – Mozilla 0.9.5 по 1.1 alpha и Mozilla 1.0
Moz & Safari – Mozilla 1.0.1, Mozilla 1.1 beta и выше, Firefox and Netscape 7, Safari v73 (0.9) по Safari v419.3 (2.0.4), Konqueror 3.5
Opera 9 – Opera 9.0…9.10
Opera 7.5 – Opera 7.5…8.02
IE 7 & Opera 7.10 – Windows IE 7 и Opera 7.10…7.23 
IE 6 & Opera 7.0 – Windows IE 6 и Opera 7.0…7.03
Mac IE 5 – Mac IE 5.0…5.2.3
Konq 3.2 – Konqueror 3.2.2…3.3 (возможно, также 3.1…3.2.1; автор не смог проверить) 

(саму таблицу пока предлагаю посмотреть в оригинале - здесь таблицу не нарисуешь, да и в ней в принципе все понятно... позже, наверное, подготовлю картинку... - прим. перев.)

XHTML Basic (с XML-декларацией) and XHTML 1.1 (тоже с ней) не перечислены в таблице, потому что «вынюхивание Doctype» применяется только к документам, отданным сервером с Content-type=text/html, а XHTML Basic и XHTML 1.1 не должны отдаваться с таким Content-type. Однако, если все-таки такие документы были получены именно как text/html, режим отображения для них выбирается так же, как и для XHTML 1.0 Strict. В частности, при наличии XML-декларации Windows IE 6 использует свой «Quirks mode».

Также прошу заметить, что XHTML 1.0 Transitional, отданный с XML-ным Content-type, отображается в полностью стандартном режиме («Standards mode») даже в новейших версиях Мозиллы.

Историческая справка

В Мозилле код «вынюхивания Doctype» существенно менялся в октябре 2000, сентябре 2001 и в июне 2002 г. В этой статье описана ситуация со сборками Мозиллы, выложенными на ftp.mozilla.org с 19.10.2000 и позднее, а также с Netscape 6.x. В статье не затронута работа «вынюхивания Doctype» в Mozilla M18 (и Netscape 6.0 PR3). Соответствующий код Safari тоже существенно изменился со времени первой публичной беты, поэтому поведение версий до v73 (0.9) статья не охватывает.

Код «вынюхивания Doctype» Konqueror-а, судя по всему, берет начало от какой-то древней версии Safari (AFAIK, наоборот, Safari вырос из Konqueror-а… ну да ладно – прим. перев.). Как минимум, в ранних версиях Safari странное поведение не было запланированным, это был баг. Скорее всего, поведение Konqueror-а будет изменено. Нынешний код «вынюхивания Doctype» в Safari взят из Мозиллы.

Как видно из таблицы, «вынюхивание Doctype» Оперы заметно сдвинулось от «как в IE» в сторону «как в Мозилле». Тогда же поведение «Quirks mode» Оперы поменялось с имитации аналогичного режима IE6, став подобным «Quirks mode» Мозиллы.

Выбор Doctype

text/html

Простые общие соображения по выбору Doctype для новых документов, отдаваемых сервером как text/html.

• Если нужен стандартный режим:
  
  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  
  Это правильный подход. Обязательно проверяйте выравнивание рисунков в таблицах в Firefox, Safari или Opera 9. Тестирование его в IE не даст адекватного результата!
  
  
  
• Вы не прочь использовать стандартный режим, но при этом хотите, чтобы устаревшая разметка проходила валидацию, либо же у вас картинки порезаны по таблицам и вам лень исправлять их все:
  
  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
  
  Это даст вам «почти стандартный» режим (и полностью стандартный в ископаемых версиях Мозиллы). Но учтите, что дизайны на основе разрезанных картинок в таблице могут поломаться, если вы позже перейдете на HTML5 (и, стало быть, полностью стандартный режим).
  
  
  
• Вам специально нужен Quirks mode:
  
  Вообще убрать Doctype.
  
  Пожалуйста, не делайте этого. Верстка для Quirks mode начнет преследовать вас, ваших коллег или будущих сменщиков – когда никто больше не будет думать о совместимости с IE 5 (как уже никому нет дела до Netscape 4.x). Верстка для Quirks mode – плохая идея, искренне убеждает автор статьи.
  
  Если вам еще нужна поддержка Windows IE 5, лучше воспользоваться CSS-хаками для него, чем отбрасывать остальные браузеры назад в режим обратной совместимости.

Автор не рекомендует XHTML-доктайпы, потому что отдавать XHTML как text/html многие считают вредным. Если вы все-таки выберете XHTML-доктайп, просьба отметить, что XML-декларация заставляет IE 6 (но не IE 7!) переключиться в Quirks mode.

application/xhtml+xml

Простейший совет для документов, отдаваемых как application/xhtml+xml – не использовать Doctype вообще (см. приложение ниже). 

Как насчет HTML5?

Автор настаивает на рекомендации тех же двух Doctype, что он рекомендует выше с 2000 года. Это хороший и стабильный совет.

Когда хотя бы два из «большой четверки» браузеров (Firefox, Opera, Safari и IE) будут поддерживать HTML5, автор намерен изменить свою рекомендацию в пользу HTML5-доктайпа. Однако, сейчас пока еще не время, если только вы не «фанат» HTML5 и не поддерживаете постоянный контакт с WHATWG. Поспешность с HTML5 может привести к ситуации, подобной той, которая сейчас наблюдается с Atom 0.3.

(прим. перев.: судя по дате обновления оригинала, речь о состоянии дел на июнь-июль 2007 года)

Ссылки

• Эрик Мейер пишет о режимах Mac IE 5 в статье «Используйте правильный Doctype»
• «Вынюхивание Doctype» у Мозиллы (статья Дэвида Бэрона)
• В статье «Расширения CSS в Internet Explorer 6» Лэнса Сильвера обсуждаются режимы и «вынюхивание Doctype» в Windows IE 6
• Переключение режимов с помощью DOCTYPE в Opera 9
• Другой перевод этой же статьи на xhtml.ru  
• «Почему так важен DOCTYPE» - перевод статьи Джеффри Зельдмана "Fixing your site with the right DOCTYPE" на Webmascon

Приложение: просьба ко всем, кто разрабатывает либо реализует спецификации, по поводу XML

Пожалуйста, не переносите «вынюхивание Doctype» в XML.

«Вынюхивание Doctype» - это решение проблемы «мешанины тегов», на уровне самой мешанины тегов. Оно было придумано уже после спецификаций HTML 4 и CSS2, как эвристический способ разграничить «наследия дикого веба» от документов, чьи авторы рассчитывают на стандартное поведение.

Иногда возникают предложения, что «вынюхивание Doctype» может применяться и в XML-среде для выбора разных обработчиков, распознавания используемого словаря или включения/выключения каких-то «фич». Это плохая идея. Раздача обработчикам и активация словаря должны основываться на пространствах имен, а активация «фич» – на явных инструкциях обработки или элементах.

Вся концепция «well-formedness» была введена, чтобы позволить парсинг XML без участия DTD и, еще шире – документы без Doctype. Формально, если два XML-документа имеют одну каноническую форму и приложение обрабатывает их по-разному (причем различие не вызвано намеренным отключением обработки внешних сущностей), то, вероятно, это приложение «глючит». С учетом того, что, как автор веб-страницы, вы не можете полагаться на то, что каждый, кто парсит вашу страницу, использует XML-процессор, распознающий внешние сущности (даже если в некоторых браузерах это и так), вставка Doctype в XML для веба практически бессмысленно, и делается зачастую по «псевдорелигиозным» соображениям или просто по привычке (и без Doctype можно провалидировать страницу по DTD, используя функцию перекрытия DTD у валидатора от W3C, а еще лучше воспользоваться валидацией с помощью RELAX NG, которая не засоряет документ ссылками на схемы). Требование наличия доктайпа только для различения чего-либо нелепо, хотя именно таково положение дел с HTML.

Далее, когда низкоуровневая спецификация указывает, что две вещи эквивалентны, спецификация более высокого уровня не должна пытаться придать этим вещам разное значение. Рассмотрим <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">. Если убрать публичный идентификатор, ссылка будет по-прежнему указывать на то же DTD и, значит, Doctype <!DOCTYPE html SYSTEM "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> значит то же самое, что и предыдущий. Должны ли они «вынюхиваться» по-разному? Мысль можно развить еще дальше. Предположим, DTD скопировано на example.com под именем foobar.dtd: <!DOCTYPE html SYSTEM "http://example.com/foobar.dtd">. Как должно распознаваться это? Смысл ведь тот же. Наконец, DTD может быть вообще целиком вставлено внутрь Doctype! 

Аналогичный пример: если у нас есть строчка #include "foo.h", то к имени foo.h не должно быть привязано никакой «черной магии», потому что должна быть возможность вставить вместо нее само содержимое foo.h, либо скопировать содержимое foo.h в bar.h и написать #include "bar.h".

Причина, по которой автор не утруждает себя таким же спором об HTML и SGML – браузеры не пользуются настоящими SGML-парсерами для разбора HTML, поэтому анализировать их поведение с точки зрения формальных правил SGML бесполезно. Если вы не согласны, обратите внимание на пост У. Элиота Каймбера по теме.

Это сообщение отредактировал(а) SelenIT - 23.1.2008, 19:19

Собственно, табличка по состоянию на 26.01.2008:       Doctype    NS6     OldMoz     Moz&amp; Safari     Opera 9    Opera7.5     IE 7 &amp; Opera7.10     IE6&amp; Opera 7.0     MacIE 5     Konq3.2                 Без Doctype            Q      Q      Q      Q      Q      Q      Q      Q      Q              <!DOCTYPEHTML PUBLIC '-//W3C//DTD HTML 3.2 Final//EN'>       Q      Q      Q      Q      Q      Q      Q      Q      Q              <!DOCTYPEHTML PUBLIC '-//W3C//DTD HTML 4.0//EN'>       S      S      S      S      S      A      A      A      A              <!DOCTYPEHTML PUBLIC '-//W3C//DTD HTML 4.01//EN'>       S      S      S      S      S      A      A      Q      A              <!DOCTYPEHTML PUBLIC '-//W3C//DTD HTML 4.0//EN''http://www.w3.org/TR/html4/strict.dtd'>       S      S      S      S      S      A      A      A      A              <!DOCTYPEHTML PUBLIC '-//W3C//DTD HTML 4.01//EN''http://www.w3.org/TR/html4/strict.dtd'>       S      S      S      S      S      A      A      A      A              <!DOCTYPEHTML PUBLIC '-//W3C//DTD HTML 4.0 Transitional//EN'>       Q      Q      Q      Q      Q      Q      Q      Q      Q              <!DOCTYPEHTML PUBLIC '-//W3C//DTD HTML 4.01 Transitional//EN'>       Q      Q      Q      Q      Q      Q      Q      Q      Q              <!DOCTYPEHTML PUBLIC '-//W3C//DTD HTML 4.01 Transitional//EN''http://www.w3.org/TR/html4/loose.dtd'>       S      S      A      A      A      A      A      A      Q              <!DOCTYPEHTML PUBLIC '-//W3C//DTD HTML 4.01 Transitional//EN''http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd'>            Q      S      A      A      A      A      A      A      Q              <!DOCTYPEHTML PUBLIC '-//W3C//DTD HTML 4.0 Transitional//EN''http://www.w3.org/TR/html4/loose.dtd'>       Q      Q      Q      Q      A      A      A      A      Q              <!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.1//EN' 'http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd'>       S      S      S      S      S      A      A      A      A              <!DOCTYPE html PUBLIC '-//W3C//DTD XHTML Basic 1.0//EN' 'http://www.w3.org/TR/xhtml-basic/xhtml-basic10.dtd'>       S      S      S      S      S      A      A      A      A              <!DOCTYPEhtml PUBLIC '-//W3C//DTD XHTML 1.0 Strict//EN''http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd'>       S      S      S      S      S      A      A      A      A              <!DOCTYPEhtml PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN''http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>            S      S      A      A      A      A      A      A      Q              <?xmlversion='1.0' encoding='UTF-8'?><!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.1//EN' 'http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd'>       S      S      S      S      S      A      Q      A      Q              <?xmlversion='1.0' encoding='UTF-8'?><!DOCTYPE html PUBLIC '-//W3C//DTD XHTML Basic 1.0//EN' 'http://www.w3.org/TR/xhtml-basic/xhtml-basic10.dtd'>       S      S      S      S      S      A      Q      A      Q              <?xmlversion='1.0' encoding='UTF-8'?><!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Strict//EN''http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd'>       S      S      S      S      S      A      Q      A      Q              <?xmlversion='1.0' encoding='UTF-8'?><!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN''http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>            S      S      A      A      A      A      Q      A      Q              <!DOCTYPEHTML PUBLIC 'ISO/IEC 15445:2000//DTD HTML//EN'>       Q      S      S      Q      Q      Q      Q      Q      Q              <!DOCTYPEHTML PUBLIC 'ISO/IEC 15445:2000//DTD HyperText MarkupLanguage//EN'>       Q      S      S      S      S      A      A      A      Q              <!DOCTYPEHTML PUBLIC 'ISO/IEC 15445:1999//DTD HTML//EN'>       S      S      S      Q      Q      Q      Q      Q      Q              <!DOCTYPEHTML PUBLIC 'ISO/IEC 15445:1999//DTD HyperText MarkupLanguage//EN'>       S      S      S      S      S      A      A      A      Q              <!DOCTYPE html> (HTML 5)      Q      S      S      S      S      A      A      A              

Это сообщение отредактировал(а) SelenIT - 29.1.2008, 02:30

Она не на что не влияет- страницы отображаются одинакого!!!  
Людям заняться просто нечем-вот и придумали всякой фигни...  

SelenIT, спасибо, почитаю. Как-то я раньше пропустил ее.

А есть возможность табличку поправить?