Доктайп
Кроме переключения браузера в один из режимов, доктайп также сообщает, согласно каким правилам синтаксиса проводить проверку текущего документа. К примеру, для HTML 4.01 и XHTML 1.0 существует по три разных типа доктайпа, для HTML5 лишь один доктайп.
Строгий доктайп
Применяется строгий синтаксис языка, допускается включать все теги и атрибуты, кроме осуждаемых.
Для HTML 4.01:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
Для XHTML 1.0:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Правила синтаксиса зависят от используемой версии, но в целом должны соблюдаться следующие.
Осуждается использование следующих тегов: <applet>, <basefont>, <center>, <dir>, <font>,
<isindex>, <noframes>, <plaintext>, <s>, <strike>, <u>, <xmp>. Взамен по возможности рекомендуется использовать стили.
Текст, изображения и элементы форм нельзя напрямую добавлять в <body>, эти элементы должны обязательно находиться внутри блочных элементов вроде <p> или <div>.
Осуждается применение атрибутов target, start (тег <ol>), type (теги <li>, <ol>, <ul>) и др.
Естественно, также должен соблюдаться синтаксис языка — правильное вложение тегов, закрытие тегов, должны присутствовать обязательные теги и др. Документ с неявными ошибками приведён в примере 2.9.
Пример 2.9. Невалидный код HTML |
|
|
|
|
|
|
|
|
HTML 4.01 |
IE 7 |
IE 8 |
IE 9 |
Cr 8 |
Op 11 |
Sa 5 |
Fx 3.6 |
|
|
|
|
|
|
|
|
|
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head> <title>Заголовок</title>
</head>
<body>
<form>
<input type="text">
</form>
</body>
</html>
В данном примере у тега <form> нет обязательного атрибута action, тег <input> располагается напрямую внутри формы, хотя должен быть заключён в блочный тег. Также не указана кодировка через метатег. Это не является ошибкой, но пользователям в некоторых случаях придется самостоятельно указывать её в браузере. Валидный код XHTML с учётом исправленных ошибок при строгом доктайпе продемонстрирован в примере 2.10.
Пример 2.10. Валидный код XHTML
XHTML 1.0 IE 7 IE 8 IE 9 Cr 8 Op 11 Sa 5 Fx 3.6
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Заголовок</title>
</head>
<body>
<form action="">
<p><input type="text" /></p>
</form>
</body>
</html>
Переходный доктайп
Применяется «мягкий» синтаксис языка, допускается использовать все теги и атрибуты, включая осуждаемые.
Для HTML 4.01:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
Для XHTML 1.0:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Цель переходного доктайпа заключается в постепенном знакомстве с синтаксисом языка. Сразу использовать строгий синтаксис кому-то покажется слишком сложным, для таких людей и предназначен переходный HTML и XHTML. К тому же некоторые привычные вещи в строгой версии оказались под запретом, поэтому переходный доктайп покажется панацеей для тех, кто не может отказаться от старых привычек. Речь, к примеру, идёт об атрибуте target, который позволяет открывать ссылку в новом окне. Использование target осуждается, в том числе из-за системы вкладок, ставших стандартом де-факто в браузерах. Одному пользователю нравится открывать ссылку в текущем окне, другому в новой вкладке, а третьему в новом окне. Чтобы поведение ссылки не зависело от прихоти разработчика, атрибут target запрещен при строгом доктайпе. При переходном доктайпе добавление target к тегу <a> абсолютно валидно (пример 2.11).
Пример 2.11. Использование переходного доктайпа |
|
|
|
|
|
|
|
|
|
XHTML 1.0 |
|
IE 7 |
IE 8 |
IE 9 |
Cr 8 |
Op 11 |
Sa 5 |
Fx 3.6 |
|
|
|
|
|
|
|
|
|
|
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Ссылка в новом окне</title>
</head>
<body>
<a href="http://htmlbook.ru" target="_blank">Открыть в новом окне</a>
</body>
</html>
Фреймы
Применяется во фреймовой структуре в документе, по синтаксису аналогичен переходному доктайпу.
Для HTML 4.01:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">
Для XHTML 1.0:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
Данный доктайп применяется только для главного документа, формирующего структуру фреймов с помощью тегов <frameset> и <frame> (пример 2.12).
Пример 2.12. Использование фреймов XHTML 1.0 IE 7 IE 8 IE 9 Cr 8 Op 11 Sa 5 Fx 3.6
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Фреймы</title>
</head>
<frameset rows="*,80" cols="*"> <frameset cols="80,*">
<frame src="left.html" name="leftFrame" scrolling="no" noresize="noresize" />
<frame src="main.html" name="mainFrame" />
</frameset>
<frame src="bottom.html" name="bottomFrame" scrolling="no" noresize="noresize" />
</frameset>
</html>
Документы, открываемые внутри фреймов (в данном примере это left.html, main.html и bottom.html), используют строгий или переходный доктайп, но никак не с фреймами.
HTML5
В HTML5 существует лишь один тип доктайпа, который переводит браузер в стандартный режим.
<!DOCTYPE html>
Подробнее об HTML5 будет рассказано в следующих главах.
Режимы Internet Explorer
Вокруг Internet Explorer сложилась ситуация, которая больше не прослеживается ни с одним другим браузером — разброс версий начинается с 6.0 и заканчивается 9.0. Причины использования устаревших версий могут быть совершенно разные.
Internet Explorer встроен в операционную систему Windows и неопытные пользователи даже не подозревают о наличии альтернативы.
Корпоративные пользователи с ограниченным доступом не могут самостоятельно обновить версию или сменить браузер.
Обновление IE до новой версии происходит через систему Windows Update, которая часто отключается по требованиям безопасности или для снижения интернет-трафика.
Некоторые приложения, например, банковские, могут быть «заточены» для работы только под конкретную версию IE.
В силу инерции мышления, когда пользователю нравится та программа, с которой он привык работать.
Сама компания Microsoft всячески поощряет переход на новые версии Internet Explorer и в 2010 году прекратила поддержку IE6 и IE7.
Что касается разработчиков сайтов, то для них такой большой набор версий это настоящая проблема. Каждая версия IE содержит свои уникальные ошибки, особенности отображения веб-страниц, а также не поддерживает какие-то свойства CSS. Одним из радикальных вариантов решения проблемы является полный отказ разработчика от поддержки определенных версий IE. Так, некоторые сервисы Google, сайт vkontakte.ru при попытке зайти на них через IE6 выдают предупреждение о том, что вы используете устаревший браузер. С другой стороны, некоторые разработчики интернет-магазинов бьются за каждый браузер, полагая, что даже если каким-то браузером пользуется 2%, то отказ от него приведет к потере 2% клиентов.
Из-за того, что каждая версия IE может отображать сайт по своему, разработчики IE8 оказались перед
часть сайтов «рассыпалась». В итоге было принято решение добавить режим представления совместимости; для быстрого переключения сайтов в этот режим возле адресной строки добавлена специальная кнопка (рис. 2.6). В действительности при переключении в этот режим браузер начинал работать как версия 7.0. В IE9 пошли еще дальше и в нём уже можно переключаться на IE8 или IE7.
Рис. 2.6. Кнопка для переключения в режим совместимости в IE8
Обилие версий IE усложняется еще тем, что версии браузера могут работать в нескольких режимах, порождая большое количество комбинаций, которые необходимо учитывать разработчику. Начиная с версии 8.0, переключение режимов в браузере делается через Средства разработчика (Сервис > Средства разработчика), которое проще вызвать при нажатии на клавишу
F12
. В этом инструменте доступно два пункта меню связанных с режимами: Режим браузера (рис. 2.7) и Режим документов.
Рис. 2.7. Режимы браузера
Выбор режима браузера определяет следующее:
строка User-Agent, которую браузер отправляет на сервер, в Microsoft называется «агент пользователя»;
версия для условных комментариев, которую в Microsoft называют «вектор версии»; 
режим документа.
Агент пользователя представляет собой текстовую строку, отправляемую на сервер для идентификации браузера, его версии и операционной системы. Значение User-Agent определяет не только браузер, но также поисковых пауков и сетевых роботов. Список возможных значений User-Agent и разбор строки можно посмотреть на сайте http://www.useragentstring.com. В табл. 2.1 приведены значения User-Agent при выборе разных режимов IE.
|
Табл. 2.1. Значения User-Agent |
||
|
|
|
|
Режим |
User-Agent |
Описание |
|
браузера |
|||
|
|
||
|
|
|
|
|
Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 6.1; |
|
|
IE7 |
SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; |
Серверу отправляются |
|
.NET CLR 3.0.30729; Tablet PC 2.0; .NET4.0C; |
данные, что браузер IE7. |
||
|
|||
|
AskTbPTV2/5.9.1.14019) |
|
|
|
|
|
|
|
Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; |
|
|
IE8 |
Trident/4.0; SLCC2; .NET CLR 2.0.50727; .NET CLR |
Серверу отправляются |
|
3.5.30729; .NET CLR 3.0.30729; Tablet PC 2.0; |
данные, что браузер IE8. |
||
|
|||
|
.NET4.0C; AskTbPTV2/5.9.1.14019) |
|
|
|
|
|
|
IE9 |
Mozilla/5.0 (compatible; MSIE 9.0; Windows NT 6.1; |
Серверу отправляются |
|
Trident/5.0) |
данные, что браузер IE9. |
||
|
|||
|
|
|
|
Режим |
Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 6.1; |
Серверу отправляются |
|
Trident/5.0; SLCC2; .NET CLR 2.0.50727; .NET CLR |
данные, что браузер IE7, |
||
совместимости |
|||
IE9 |
3.5.30729; .NET CLR 3.0.30729; Tablet PC 2.0; |
но значение «Trident/5.0» |
|
.NET4.0C; AskTbPTV2/5.9.1.14019) |
соответствует IE9. |
||
|
|||
|
|
|
|
В вашем случае строка User-Agent может отличаться от приведенных в таблице, поскольку она зависит от версии Windows и её параметров.
Вектор версии позволяет с помощью условных комментариев определять версию IE и отдавать для неё отдельный код. Условные комментарии активно применяются в вёрстке для устранения различий в макете между IE и другими браузерами. Подробнее о них пойдёт речь позже, пока же вы можете ознакомиться с небольшим примером, который показывает текст только в IE8. Остальные браузеры игнорируют этот фрагмент, считая его комментарием.
<!--[if IE 8]>
<p>У вас браузер IE8.</p> <![endif]-->
Режим документа меняется с помощью меню в Средствах разработчика (рис. 2.8).
Рис. 2.8. Режимы документа
Начиная с версии IE6, имеются следующие режимы (табл. 2.2).
|
Табл. 2.2. Режимы документа IE |
|
|
|
|
Режим |
Описание |
|
|
|
|
|
Несмотря на то, что браузером IE5 уже никто не пользуется, этот режим |
|
IE5 (режим |
применяется во всех старших версиях IE при переключении в режим |
|
совместимости) |
совместимости. Достаточно не указать доктайп и вы, словно на машине |
|
|
времени, вернётесь в прошлый век к отображению в этом браузере. |
|
|
|
|
IE6 |
Этот режим работает только в версии 6.0. |
|
|
|
|
IE7 |
Стандартный режим браузера IE7 и режим при переключении на него в IE8 |
|
и IE9. |
||
|
||
|
|
|
IE8 |
Стандартный режим браузера IE8 и режим при переключении на него в |
|
IE9. |
||
|
||
|
|
|
IE9 |
Этот режим работает только в версии 9.0. |
|
|
|
Кроме переключения непосредственно в браузере, задать режим можно через тег <meta>, отправив
HTTP-заголовок X-UA-Compatible.
<meta http-equiv="X-UA-Compatible" content="IE=версия" />
Версия может принимать следующие значения (табл. 2.3).
|
Табл. 2.2. Режимы документа IE |
|
|
|
|
Значение |
Описание |
|
|
|
|
5 |
Вынужденное переключение в режим IE5, доктайп при этом игнорируется. |
|
|
|
|
7 |
Вынужденное переключение в режим IE7, доктайп при этом игнорируется. |
|
|
|
|
8 |
Вынужденное переключение в режим IE8, доктайп при этом игнорируется. |
|
|
|
|
9 |
Вынужденное переключение в режим IE9, доктайп при этом игнорируется. |
|
|
|
|
EmulateIE7 |
При наличии доктайпа переключается в режим IE7, в противном случае в режим |
|
совместимости. |
||
|
|
|
EmulateIE8 |
При наличии доктайпа переключается в режим IE8, в противном случае в режим |
|
совместимости. |
||
|
|
|
EmulateIE9 |
При наличии доктайпа переключается в режим IE9, в противном случае в режим |
|
совместимости. |
||
|
|
|
Edge |
Устанавливает документ в наиболее новый доступный режим. Для версии 8.0 |
|
это режим IE8, для версии 9.0 это режим IE9. |
||
|
||
|
|
К примеру, на сайте Яндекса применяется следующий код для эмуляции режима IE7.
<meta http-equiv="X-UA-Compatible"content="IE=EmulateIE7">
При добавлении данного кода в документ кнопка режима совместимости (рис. 2.6) в браузере исчезает.