• Техногрет
  • Тип документа: режимы рендеринга

    HTML и CSSXSLTJavaScriptИзображенияСофтEtc
    Андрейка Лечев

    24 декабря 2005


    Какие бывают типы?

    После того, как мы выяснили, что объявление типа документа меняет способ отображения элементов (см. Тип документа: объявлять или не объявлять?), стоит рассказать о том, каким образом это происходит.

    Для начала следует вспомнить, что существует много вариантов объявлений, зависящих от того, какой тип документа используется. В примерах, приведенных ниже, речь идет о двух типах HTML.

    Первый — для почти стандартного режима в браузерах Mozilla и Safari:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
            "http://www.w3.org/TR/html4/loose.dtd">

    Второй — для стандартного режима во всех браузерах:

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN"
            "http://www.w3.org/TR/html4/strict.dtd">

    В режиме совместимости со старыми браузерами <!DOCTYPE> не используется вообще. Стоит отметить, что отдельные режимы включаются вне зависимости от того, валидный HTML в документе или нет.

    Различия в отображении элементов

    Важно помнить, что «старые» браузеры, до сих пор остающиеся популярными (например, Internet Explorer 5.0 и 5.5), не поддерживают стандартный режим и отображают элементы в режиме совместимости. Если вы решили верстать по стандартам, ожидайте неправильного поведения элементов в этих браузерах.

    Размеры блоков

    Ширина блокового элемента — это сумма ширины контента, ширины внутреннего и внешнего отступов и ширины рамки (то же самое и с высотой). В стандартном режиме CSS-свойство width (height) задает значение ширины (высоты) только для содержимого блока, не учитывая отступы и рамку. В режиме совместимости в Internet Explorer и Opera эти свойства задают ширину (высоту) с учетом отступов и рамки.

    Очень часто это отличие приводит к тому, что из-за «лишних» отступов сайты «разъезжаются» в браузерах Mozilla и Safari.

    Как это выглядит в браузере

    Размер шрифта в таблицах

    Еще со времен Netscape Navigator 2.0 размер шрифта в таблицах не наследуется, т. е. если размер шрифта в таблице указывается в виде относительной величины (например, в процентах), то эта величина вычисляется не относительно размера шрифта родительского элемента, а относительно размера шрифта, заданного по умолчанию для всего документа. А по стандартам размер шрифта в таблицах вычисляется только относительно размера шрифта родительского элемента.

    Если в новых браузерах шрифт на сайте становится все меньше и меньше с каждой вложенной таблицей, а в IE5 выглядит нормально — это как раз описанный случай!

    Как это выглядит в браузере

    Изображения

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

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

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

    Как это выглядит в браузере

    Внешние отступы у первого и последнего элементов

    Если блоковый элемент является первым или последним элементом в документе или ячейке таблицы и имеет по умолчанию внешние отступы (сверху и снизу), то «старые» браузеры эти отступы проигнорируют (кроме случаев, когда они прописаны с помощью CSS). В стандартном режиме отступы появятся обязательно — из-за этого в браузерах (кроме Internet Explorer) некоторые тексты будут выглядеть странно.

    Как это выглядит в браузере

    Значения без указания единицы

    Раньше существовало негласное правило: если в CSS прописано значение, но не указана какая именно единица измерения используется (px, %, em или ex), то это пиксели (кроме случаев, когда речь идет о размере шрифта). Теперь же, по стандартам: не указана единица измерения — значение не учитывается при верстке.

    Простое правило: всегда указывайте единицу измерения (даже если это px)!

    Как это выглядит в браузере

    О других типах

    Если вас интересуют другие типы (например, XHTML или документ с фреймами), то у Генри Сивонена есть замечательная таблица, которая дает понять какой тип документа какой режим отображения включает.

    На сайте mozilla.org тоже есть перечень типов. Официальное заявление о Safari мне не встречалось, но во многих блогах упоминается, что код определителя режимов взят из кода Gecko, так что можно смело пользоваться документацией Mozilla.

    В документации Opera есть таблица с полным списком и кратким описанием изменений.

    И даже на Microsoft Developers Network есть статья, где описано какие типы переключают режимы в Internet Explorer.

    Стоит заметить, что в режим совместимости со старыми версиями MSIE переключается XML-документ, начинающийся не с <!DOCTYPE>, а с XML declaration:

    <?xml version="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">

    Совет

    Даже если используете валидный XHTML, не включайте объявление XML в начале файла. Тем более, что по спецификации XHTML оно вовсе не обязательно.