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

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

demosourse

Беглый обзор элементов 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;
}

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

Проблема

Теперь давайте взглянем на наш шаблон. Код собран в единое целое и протестирован в нескольких браузерах. Так шаблон выглядит в 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 на элемент.

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: www.net.tutsplus.com
Перевел: Сергей Фастунов
Урок создан: 4 Июля 2010
Просмотров: 42227
Правила перепечатки

5 последних уроков рубрики "HTML и DHTML"

^ Наверх ^