Режим совместимости (Quirks Mode) и стандартный режим (Standards Mode)

В самом начале веба страницы обычно писались в двух версиях: одна для браузера Netscape Navigator, другая для браузера Microsoft Internet Explorer. Когда W3C были созданы новые веб стандарты, браузеры не могли их сразу использовать, так как это могло привести к некорректному отображению большинства существующих сайтов. Для правильного отображения устаревших сайтов и сайтов, поддерживающих новые стандарты, браузерами были разработаны два режима отображения.

На сегодняшний день существует три режима отображения, которые используются движками разметки (layout engines) браузеров: режим совместимости (quirks mode), частично стандартный режим (almost standards mode) и стандартный режим (full standards mode). В режиме совместимости (quirks mode), разметка эмулирует нестандартное поведение браузеров Navigator 4 и Internet Explorer 5. Этот режим необходим для поддержки сайтов, созданных до начала широкого применения веб стандартов. В стандартном режиме (full standards mode) поведение браузера соответствует (будем надеяться) описанному в спецификациях HTML и CSS. В частично стандартном режиме (almost standards mode) реализовано лишь незначительное количество так называемых "странностей" (quirks).

Как браузеры понимают, какой режим использовать?

Браузеры используют тег DOCTYPE, чтобы определить в каком режиме обрабатывать документ. Для отображения страницы в стандартном режиме необходимо добавить тег DOCTYPE в HTML-код страницы как показано в примере ниже:

html

<!doctype html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Hello World!</title>
  </head>
  <body></body>
</html>

Тег DOCTYPE, указанный в примере, - <!DOCTYPE html> - самый простой способ обеспечить стандартный режим отображения; использование этого тега рекомендовано стандартом HTML5. Для предыдущих версий HTML рекомендованы другие варианты, но все существующие на текущий момент браузеры используют такой тег DOCTYPE для отображения страницы в стандартном режиме, даже Internet Explorer 6. На сегодняшний день не существует веских причин для использования более сложного тега DOCTYPE. Использование какого-либо другого тега DOCTYPE может привести к переключению браузера в частично стандартный режим отображения или в режим совместимости.

Необходимо удостовериться, что тег DOCTYPE находится в самом начале HTML документа. Если на странице будет что-либо до тега DOCTYPE, например, комментарий или декларирование XML, то браузеры Internet Explorer 9 и выше будут переведены в режим совместимости.

В стандарте HTML5 тег DOCTYPE используется исключительно для активации стандартного режима отображения. Предыдущие версии HTML придавали дополнительное значение использованию тега DOCTYPE, но браузеры использовали тег DOCTYPE ис��лючительно для переключения между режимом совместимости и стандартным режимом.

Смотрите также детальное описание того, как разные браузеры выбирают режимы.

XHTML

Если страница написана в XHTML формате с указанием типа MIME application/xhtml+xml в заголовке Content-Type, то не нужно указывать DOCTYPE для активации стандартного режима, так как подобные документы всегда отображаются в стандартном режиме. Важно иметь в виду, что Internet Explorer 8 вместо контента такой страницы отображает диалоговое окно загрузки как для неизвестного формата, поскольку поддержка XHTML реализована в Internet Explorer, начиная с 9 версии.

Если страница написана в XHTML формате с использованием типа MIME text/html, браузер будет интерпретировать его как HTML, поэтому для использования браузером стандартного режима отображения необходимо указать тег DOCTYPE.

Как узнать, какой режим используется?

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

Значение document.compatMode в JavaScript показывает, отображается ли документ в режиме совместимости. Если значение равно "BackCompat", значит документ в режиме совместимости. В противном случае значение будет равно "CSS1Compat".