Как заставить все браузеры правильно отрисовывать разметку HTML 5
HTML 5 имеет в своем составе несколько новых свойств, предназначенных для вэб дизайнеров, которые хотят писать читаемый, семантически-значимый код. Однако, поддержка HTML 5 все еще только развивается, и Internet Explorer - последний браузер, где она появляется. В данном уроке мы создадим общий шаблон с использованием некоторых новых семантических элементов HTML 5. А затем воспользуемся javascript и CSS, чтобы обеспечить обратную совместимость с Internet Explorer. Даже с IE 6.
Забрать исходники
Беглый обзор элементов HTML 5
Черновой стандарт HTML 5 описывает набор новых семантически значимых элементов для описания стандартного шаблона вэб страницы. Использованием элементов, которые являются “значимыми” (то есть описывают свое содержимое) упрощает чтение и организацию кода, а также облегчает задачу для поисковых механизмов и по чтению и организации вашего контента.
Только чтение названий элементов указывает на их назначение. Для этого их и придумали!
<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
Отлично. Internet Explorer 6 теперь изображает код HTML 5 также, как и Safari 4.
Заключение
Многие дизайнеры ожидают полноценной поддержки HTML 5 в большинстве браузеров. Мы можем начинать использовать HTML 5 уже сегодня - одна строчка в CSS и одная строчка кода в javascript на элемент.
Забрать исходники
Беглый обзор элементов HTML 5
Черновой стандарт HTML 5 описывает набор новых семантически значимых элементов для описания стандартного шаблона вэб страницы. Использованием элементов, которые являются “значимыми” (то есть описывают свое содержимое) упрощает чтение и организацию кода, а также облегчает задачу для поисковых механизмов и по чтению и организации вашего контента.
Элементы HTML 5, которые используются в нашем примере:
header
footer
nav
article
hgroup
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:
Просто используется вызов 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 на элемент.