Андрейка Лечев

Тип документа: режимы рендеринга 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 оно вовсе не обязательно.





Поделиться ссылочкой: