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