/pw.gif) |
/pl.gif) |
|
|
|
|
Андрейка Лечев
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 эти свойства задают ширину (высоту) с учетом отступов и рамки.
Очень часто это отличие приводит к тому, что
Еще со времен Netscape Navigator 2.0 размер шрифта в таблицах не наследуется, т. е. если размер шрифта в таблице указывается в виде относительной величины (например, в процентах), то эта величина вычисляется не относительно размера шрифта родительского элемента, а относительно размера шрифта, заданного по умолчанию для всего документа. А по стандартам размер шрифта в таблицах вычисляется только относительно размера шрифта родительского элемента.
Если в новых браузерах шрифт на сайте становится все меньше и меньше с каждой вложенной таблицей, а в IE5 выглядит нормально — это как раз описанный случай!
Изображение — строчный элемент. Если изображение находится в тексте, то по вертикали оно отображается на уровне т. н. базовой линии шрифта, находящейся выше нижней границы строки.
В «старых» браузерах стоит лишь поставить в строке изображение без текста, отступ снизу пропадет (по этому принципу было сделано много сайтов — они верстались с помощью таблиц, где изображения располагались в отдельных ячейках).
Согласно стандартам, изображение должно выравниваться по базовой линии текстовой строки и всегда иметь отступ снизу.
Если блоковый элемент является первым или последним элементом в документе или ячейке таблицы и имеет по умолчанию внешние отступы (сверху и снизу), то «старые» браузеры эти отступы проигнорируют (кроме случаев, когда они прописаны с помощью CSS). В стандартном режиме отступы появятся обязательно —
Раньше существовало негласное правило: если в 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 оно вовсе не обязательно. |
