09 июля 2009 :Что происходит в режиме совместимости

Извиняйте, что не добралась до статьи раньше, был день рождения и т. п., да и статья большая, третий день с перерывами писала. Сегодня я хочу вам рассказать о том что происходит в Quirks mode (режиме совместимости) и режиме соответствия стандартам (Standarts Mode).

Quirks Mode (режим совместимости) — это тоже режим работы веб-браузеров таких как Internet Explorer (IE), Firefox, Opera и Safari (chrome). Буквально, режим совместимости (также называется «режимом причуд») означает что относительно современные браузеры сознательно симулируют множество багов старых браузеров, особенно IE 4 и IE 5.

Режим совместимости включается при отсутствии doctype. Это значит что браузер ожидает в начале HTML документа увидеть содержит ли он объявление doctype такое какое требуется спецификацией HTML.

Назначение режима совместимости в том чтобы показать старые страницы так как задумал их автор. Старые страницы могли быть написаны с использованием особенностей старых браузеров. По дополнительной информации о Quirks Mode в основном, смотрите сайт QuirksMode.org.

Здесь я напишу список того что происходит в режиме совместимости. Всё-таки, этот режим, по-сути, сознательное нарушение правил CSS и HTML спецификаций.

Если у вас уже есть существующая страница которая вполне работает, но не имеет объявления doctype (требуемого спецификацией HTML) в начале документа, вы не можете просто взять и написать там объявление. Причина в том что декларация переключает браузер в так называемый «режим соответствия стандартам» (Standards Mode, или говорят просто стандартный режим), противоположный режиму совместимости. Это может означать что угодно. Страница может совершенно развалиться после объявления doctype, часто вёрстка меняется довольно непредсказуемо. Впрочем, не так непредсказуемо если вы знаете что может присходить в этом режиме.

Перед добавлением doctype, вам надо проверить HTML и CSS код на синтаксическую корректность используя валидаторы. Этого может быть недостаточно, так как страница может быть свёрстана полагаясь на вещи которые работают только в Quirks Mode. Поэтому, вам надо проверить страницу как минимум в IE 7 и Firefox 2 в Standards Mode, т. е. после добавления объявления doctype. Если страница отображается некорректно, нижеизложенный список может быть полезен для разрешения проблеммы.

При создании новой страницы, вам не нужно учитывать Quirks Mode и вообще желательно о нём не думать. Просто пишите согласно документации HTML и CSS; это включает использование объявление doctype, которое переключает современные браузеры в стандартный режим. Кроме того, указывайте объявление doctype в самом начале, т. к. некоторые браузеры (IE6) переходят в режим совместимости, если есть хоть что-то (даже комментарий) перед ним. (Это немного неудобно если вы используете XHTML, но в большинстве случаев, вам не нужно использовать XHTML для веб-страниц где-либо). Но если вы решите использовать некоторые особенности которые работают только в режиме совместимости, такие как height="100%" аттрибут у элемента table, вам следует ознакомиться со списком чтобы учесть что ещё у вас произойдёт.

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

• Некорректная блочная модель (отличается от указанной в спецификации CSS, хотя возможно более интуитивно понятна). Это значит что значения width и height указывают на размеры блока всего элемента, включая padding и border, а не только контент элемента. (В файрфоксе стандартная блочная модель применяется в обоих режимах).
• Размеры незаменяемых строчных (inline) элементов (например, span элементы по-умолчанию) подвержены влиянию свойств width и height (хотя по спецификации CSS, эти свойства должны игнорироваться).
• Высота в процентах (height) для элементов (например, <table height="100%"> в HTML или table { height: 100% } в CSS) применяются, используя доступную высоту как образец, даже когда внешний блок элемента (enclosing block) имеет высоту (height) auto (по умолчанию). В Стандартном режиме, высота определяется количеством контента; но процентная высота работает когда внешний блок имеет не процентно заданную высоту.
• Переполнение (Overflow) обрабатывается как расширения области блока (box). Когда содержимое элемента не вмещается в отведённые размеры (полностью или частично), то overflow: visible (по умолчанию) значит что контент вылезает за указанные рамки. В режиме совместимости, сами размеры содержащего контент блока изменяются; это можно легко увидеть например если у области есть back­ground color или border.
• Корневым элементом является body в IE в Quirks Mode. Согласно спецификации это должен быть, элемент html. Например, применение margin к body не будет иметь эффекта в Quirks Mode. Как другой пример, у IE по-умолчанию есть вертикальный scrollbar, хотя он и неактивен когда нечего скроллировать, и можно убрать эту полоску (когда она не нужна) в режиме совместимости ставя body { overflow: auto; }, но в режиме стандартов, надо также добавить html { overflow: auto; }.
• Padding у изображений игнорируется когда задан в CSS для элемента img или элемента input type="image".
• По-умолчанию горизонтальный внешний отступ (margin) для плавающих изображений равен трём пикселям (вместо нуля). Т.е, если у элемента img есть аттрибут align="left" или align="right" или применено CSS правило float: left или float: right, браузер показывает  img как имеющий аттрибут hspace="3" (или margin-left и margin-right свойства со значением 3px). Это применимо к IE; в других браузерах режим совместимости может вызвать дополнительный отступ только с одной из сторон, и его ширина может быть два пикселя вместо трёх.
• Вертикальное выравнивание изображений в определённых условиях находится на нижней границе (bottom) содержащего картинку блока, а не на базовой линии текста (baseline). Это случается когда картинка это единственное содержание элемента, в основном ячейки таблицы. Это значит что изображение в табличной ячейке по-умолчанию в низу ячейки в режиме совместимости (что часто так как и задумал автор), в то время как в стандартном режиме под ней появляется пространство в несколько пикселей (пока кто-нибудь не поставит например. vertical-align: bottom для элементов img). Базовая линия текста отстоит от нижней границы строки, на расстояние нужное для вмещения нижних хвостиков букв (например букв "рдцу"), и ещё небольшой отступ (интерлиньяж), поэтому правильно выравнивать картинку в ячейке не по ней, а по низу строки, соответственно убирая ненужный зазор.
• Центрирование блока в CSS используя например margin: 0 auto; не работает. Замечание: On IE (даже IE 7), установка align="center в HTML или text-align: center в CSS для div некорректно центрует внутренний блочный элемент block как целое, даже в  “стандартном режиме”.
• Свойства шрифта не наследуются от body или другого внешнего элемента на таблицы. Это применительно особенно для font-size но может случаться также и с "font face", "color", и "line height". Например, если вы задаёте body { font-family: Arial }, возможно что шрифт в ячейках таблицы останется шрифтом по-умолчанию браузера.
• Если font size задаётся ячейке таблицы, процентное значение интерпретируется как относительное к обычному размеру шрифта браузера, а не к размеру шрифта внешнего элемента (например строке таблицы) по спецификации CSS.
• Ключевые слова для размера шрифта обрабатываются некорректно так medium оказывается больше чем начальный размер шрифта браузера а small ему эквивалентен. Похожим образом все слова, xx-small, x-small, small, large, x-large, xx-large отображаются неправильно: каждое значение показывается больше чем должно.
• Некорректные значения свойств часто интерпретируются как браузер догадается, например margin: 10 как margin: 10px и color: ffffff как color: #ffffff. Это нарушает обязательную обработку ошибок в  CSS: синтаксически-некорректные правила стилей должны игнорироваться.
• Регистр букв не важен при использовании в классах (class) и идентефикаторах (id) в CSS. Т.е., селектор .foo выберет элемент с классом class="Foo" или class="FOO". По спецификации CSS, в этих случаях нужно быть чувствительным к регистру.
• Некорректные имена допустимы в классах и id. Особенно имена начинающиеся с точки и цифрового знака (например селекторы .123a и #42) допустимы.
• Объявление  white-space: pre игнорируется.
• Фиксированное позиционирование не поддерживается: объявление position: fixed обрабатывается как position: static (в IE 7).
• Множество дополнений к поддержке CSS (такие как max-width и селекторы аттрибутов) в IE 7 не работают в режиме совместимости. Так например, есть много CSS особенностей которые не поддерживаются в IE 6 и поддерживаются в IE 7, Но только в режиме стандартов. Смотрите подробнее блог Microsoft Details on our CSS changes for IE7.
• Обработка каши из тегов (tag soup parsing). Например, если документ содержит разметку
  <p>text<table>...</table>
  то например, Firefox полагает, в режиме совместимости, что элемент p содержит элемент table. В стандартном режиме, открывающий тег table сразу закрывает открытый элемент p. Разницу можно наблюдать если вы например зададите границу (border) у элемента p. Похожим образом, Firefox принимает элемент ul внутри font. IE всегда неправильно работает в этих ситуациях, даже в стандартном режиме, но околостандартное поведение можно достигнуть, используя валидную разметку и всегда точно закрывая теги типа </p> даже если они формально необизательны.
• Пробелы (white space) между элементами могут быть важны. Например, у нас есть список ссылок. Чаще всего вы напишите разметку с переносами строки между элементами списка li (т.е. между тегом </li> и <li>):

  <ul>
  <li><a ...>...</a></li>
  <li><a ...>...</a></li>
  ...
  </ul>
  

  Однако, если вы зададите display: block и border для ссылок, вы увидите вертикальные пробелы (пустые строки) между областями. Это происходит в IE 7 в режиме совместимости, и всегда в предыдущих версиях IE.
• У форм есть отступ снизу (bottom margin) в 1em (относительный размер шрифта) в Мозилле. (В IE, такой отступ в обоих режимах.) Это по-видимому одначает продолжение традиции браузеров оставлять подобное расстояние под формой.  В общем случае решение в CSS для форм такое: style="display: inline; margin: 0;".
• Вертикальные отступы (margin) схлопываются в некотором контексте, например когда элемент p является первым элементом в td. Это более-менее традиционное поведение браузера имеет место быть в IE 7 в обоих режимах (в IE 8, только в Quirks Mode).
• У семейства Mozill'ы (типа Firefox и Seamonkey) есть дополнительные особенности, описанные в файле quirk.css. Например, цвет по умолчанию для границ таблицы серый (как в большинстве других браузеров), А в стандартном режиме используется основной цвет таблицы (foreground). В таких аспектах, режимы очень отличаются. (Не все правила из файла применяются ко всем версиям Мозиллы).

Этот список далеко не полон. Он рассказывает в основном про IE 7. У других браузеров режим совметсимости подражает работе старых версий IE в той же степени.

Проверка режима

Чтобы проверить в каком режиме браузер показывает страницу (Quirks vs. Standards),

• в Firefox, используйте команду command Инструменты/Информация о странице (View/Page Info); или если у вас есть расширение Web Developer, просто посмотрите иконку на строке инструментов (третья справа), должна быть зелёная галочка.
• Для IE и других, наберите javascript:alert(document.compatMode) в адресной строке, и проверьте когда окошко выведет CSS1Compat (значит стандартный режим) или BackCompat (значит режим совместимости).