Как заставить все браузеры правильно отрисовывать разметку HTML 5

HTML 5 имеет в своем составе несколько новых свойств, предназначенных для вэб дизайнеров, которые хотят писать читаемый, семантически-значимый код. Однако, поддержка HTML 5 все еще только развивается, и Internet Explorer — последний браузер, где она появляется. В данном уроке мы создадим общий шаблон с использованием некоторых новых семантических элементов HTML 5. А затем воспользуемся javascript и CSS, чтобы обеспечить обратную совместимость с Internet Explorer. Даже с IE 6.

Забрать исходники

Прикреплённые файлы:
Файл: demo.zip
Размер: [1,85 Kb] (забрали: 8 раз)

Беглый обзор элементов HTML 5

Черновой стандарт HTML 5 описывает набор новых семантически значимых элементов для описания стандартного шаблона вэб страницы. Использованием элементов, которые являются “значимыми” (то есть описывают свое содержимое) упрощает чтение и организацию кода, а также облегчает задачу для поисковых механизмов и по чтению и организации вашего контента.

Элементы HTML 5, которые используются в нашем примере:
header
footer
nav
article
hgroup


Только чтение названий элементов указывает на их назначение. Для этого их и придумали!


<div> во всех ваших без табличных дизайнах, и начать использовать для заголовков “<header>”, а для футеров “<footer>”.

<hgroup>. Он определяет группу заголовочных элементов(<h1>- <h6>), таким образом вы, например, можете группировать название поста блога и подзаголовок вместе. Нужно полагать данный элемент не заголовком страницы, а заголовком текущей секции.

Шаг 1: HTML

Представим наиболее часто используемый шаблон — 2 колонки с заголовком и футером:


Такой шаблон обычно сопровождается водопадом элементов <div> (или <table>). Но в HTML 5 можно создавать код страницы вполне естественно.
<!DOCTYPE html>
<meta http-equiv=»Content-Type» content=»text/html; charset=utf-8″>
<html>
<head>
<title><!— Ваш заголовок —></title>
</head>
<body>
<header>
<!— … —>
</header>
<nav>
<!— … —>
</nav>
<div id=»main»>
<!— … —>
</div>
<footer>
<!— … —>
</footer>
</body>
</html>

И для завершения нужно добавить несколько простых сообщений в элемент “main”:
<article>
<hgroup>
<h2>Title</h2>
<h3>Subtitle</h3>
</hgroup>
<p>
<!— —>
</p>
</article>

Теперь у нас есть целостный шаблон HTML, который не содержит ничего лишнего кроме значимых тэгов. Просто читать, просто обрабатывать, просто изменять дизайн.

“Почему мы не использовали <section> вместо <div> для основной колонки? Разве это не было бы более “значимым”?” Конечно, вы можете сделать так, и такой способ пройдет проверку. Но элемент <section> не имеет таких функций шаблона. В соответствии со спецификацией:

Элемент section не является контейнером. В случаях, когда какой-либо элемент нуждается в форматировании или для удобства создания скриптов, автору следует использовать элемент <div>. Общее правило таково, что элемент section подходит только если содержимое элемента будет включаться непосредственно в структуру документа.

Шаг 2: CSS


<div> позиционирование элементов выполняется просто — мы знаем, как они обрабатываются каждым браузером, поэтому очень просто написать CSS код для них. Однако, это только частный случай, так как каждый браузер применяет к странице таблицу стилей по умолчанию. Даже если Вы ничего не указали, существует CSS, который работает каждый раз при загрузке страницы в Firefox или IE.

Например, стиль, который используется для <div> в файле по умолчанию “html.css”, который используется Firefox:
html, div, map, dt, isindex, form {
display: block;
}

Но что происходит, когда браузер находит элемент, который не может распознать? Определенного ответа на данный вопрос нет. Такой элемент может остаться без стиля вообще, может использоваться стиль по умолчанию, а может вообще не выводится на экран. Таким образом, нам нужно быть полностью уверенными, что любой из наших новых элементов будет иметь стиль CSS:
/* Примечание: Делаем элементы HTML 5 блочными для придания целостности стилю */
header, nav, article, footer, address {
display: block;
}


Теперь мы можем обращаться с этими элементами как с

.
Проблема

Теперь давайте взглянем на наш шаблон. Код собран в единое целое и протестирован в нескольких браузерах. Так шаблон выглядит в Safari 4:

Однако в Internet Explorer 6 вид будет таким:

Что не так на рисунке? Однозначная установка display: block; в CSS указывает браузеры на наши намерения в отношении элемента.

К сожалению, IE игнорирует элементы, которые не может распознать, независимо от CSS. Наш контент смещается влево в родительском контейнере, как будто элементов HTML 5 не существует. Каким-то образом нам нужно заставить IE выводить неизвестные элементы и задавать для них соответствующие стили.
Шаг 3: javascript

К счастью, существует способ заставить IE распознавать новые элементы с помощью простого кода javascript.

Просто используется вызов document.createElement()для каждого нового не распознанного элемента.

Обычно вызов данного метода используется для вставки элемента непосредственно в ответвление DOM; другими словами, в существующий контейнер внутри тэга <body>. Вы также может использовать его для фиксирования неизвестного элемента. Однако, этот трюк работает при вызове document.createElement() в тэге<head> без ссылок на содержащий элемент!
document.createElement(«article»);
document.createElement(«footer»);
document.createElement(«header»);
document.createElement(«hgroup»);
document.createElement(«nav»);

Remy Sharp написал “Скрипт HTML 5 Enabling,” который проделывает такой трюк для всех элементов HTML 5.

После добавления javascript в наш пример, взглянем на него снова в Internet Explorer:

Отлично. Internet Explorer 6 теперь изображает код HTML 5 также, как и Safari 4.

Заключение

Многие дизайнеры ожидают полноценной поддержки HTML 5 в большинстве браузеров. Мы можем начинать использовать HTML 5 уже сегодня — одна строчка в CSS и одная строчка кода в javascript на элемент.