HTML5: Кросбраузерная поддержка новых тегов

2011-08-09

В планах HTML5: сделать исходный код более семантичным, в следствии чего были созданы такие теги как <header />, <footer />, <article />, <nav />, <aside />, <section />, <hgroup />.
Но, использование их уже сейчас может вызвать затруднения, связанные с тем, что старые браузеры не знают таких тегов.
В этом посте мы рассмотрим как заставить все браузеры работать с новыми html5-тегами.

Сделать это просто.
Следующий фрагмент css-кода научит все старые браузеры (кроме IE) понимать новые теги:

<style>
article, nav, header, footer, section, hgroup, aside {display:block;}
</style>

Для Internet Explorer, до 8-й версии включительно, нужно выполнить такой javascript-код:

<!--[if lte IE 8]>
<script>
document.createElement("article");
document.createElement("footer");
document.createElement("header");
document.createElement("hgroup");
document.createElement("section");
document.createElement("aside");
document.createElement("nav");
</script>
<![endif]-->

Вот и все. Теперь можно смело использовать новые семантичные теги.

Пример заготовки html5-страницы, которая будет хорошо работать и в старых браузерах, может выглядеть примерно так:

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<title>HTML5-страница</title>
<meta name="description" content="шаблон HTML5-страницs" />
<meta name="keywords" content="HTML5, страница, шаблон" />
<style>
article, nav, header, footer, section, hgroup, aside {display:block;}
</style>
<!--[if lte IE 8]>
<script>
document.createElement("article");
document.createElement("footer");
document.createElement("header");
document.createElement("hgroup");
document.createElement("section");
document.createElement("aside");
document.createElement("nav");
</script>
<![endif]-->
</head>
<body>
<header>...</header>
<nav>...</nav>
<article>...</article>
<footer>...</footer>
</body>
</html>



Добавить комментарий