HTML5 Поддержка браузерами
Вы можете «научить» старые браузеры правильно обрабатывать HTML5.
Поддержка HTML5 браузерами
HTML5 поддерживается всеми современными браузерами.
Кроме того, все браузеры — как старые, так и новые — автоматически обрабатывают нераспознанные элементы как встроенные.
Благодаря этому вы можете «научить» старые браузеры работать с HTML‑элементами, которые для них являются «неизвестными».
Вы даже можете научить IE6 (Windows XP 2001 года) обрабатывать неизвестные HTML‑элементы.
Определить семантические элементы как блочные элементы
HTML5 определяет восемь новых семантических элементов. Все они являются элементами блочного уровня.
Чтобы обеспечить корректное поведение в старых браузерах, вы можете установить CSS‑свойство display для этих HTML‑элементов в значение block:
header, section, footer, aside, nav, main, article, figure {
display: block;
}
Добавьте новые элементы в HTML
Вы также можете добавить новые элементы на HTML‑страницу с помощью небольшого «трюка» браузера.
В этом примере на страницу добавляется новый элемент с именем <myHero> и определяется его стиль:
Пример
<!DOCTYPE html>
<html>
<head>
<script>document.createElement("myHero")</script>
<style>
myHero {
display: block;
background-color: #ddd;
padding: 50px;
font-size: 30px;
}
</style>
</head>
<body>
<h1>A Heading</h1>
<myHero>My Hero Element</myHero>
</body>
</html>
Попробуйте сами »
JavaScript‑объявление document.createElement("myHero") необходимо для создания нового элемента в IE9 и более ранних версиях.
Проблема с Internet Explorer 8
Вы можете использовать описанное выше решение для всех новых элементов HTML5.
Однако IE8 (и более ранние версии) не позволяют применять стили к элементам, которые им неизвестны!
Но, к счастью, Sjoerd Visscher создал HTML5Shiv! HTML5Shiv — это JavaScript‑обходной механизм, который позволяет включить поддержку стилизации HTML5‑элементов в Internet Explorer до версии 9.
Вам понадобится HTML5shiv для обеспечения совместимости в браузерах IE старше версии 9.
Синтаксис для HTML5Shiv
HTML5Shiv обычно размещают внутри тега <head>.
HTML5Shiv — это JavaScript‑файл, на который ссылается тег <script>.
Вы можете использовать HTML5Shiv, когда применяете новые HTML5‑элементы, такие как:
<article>,
<section>,
<aside>,
<nav>,
<footer>.
Вы можете скачать последнюю версию HTML5Shiv с GitHub или подключить CDN‑версию: https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js (или, альтернативно, более новую версию на нашем сайте: html5shiv.js).
Синтаксис
<head>
<!--[if lt IE 9]>
<script src="/js/html5shiv.js"></script>
<![endif]-->
</head>
HTML5Shiv Пример
Если вы не хотите загружать и хранить скрипт HTML5Shiv у себя на сайте, вы можете использовать версию, размещённую на CDN.
Скрипт HTML5Shiv обычно помещают внутри элемента <head> сразу после подключения таблиц стилей:
Пример
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
<![endif]-->
</head>
<body>
<section>
<h1>Famous Cities</h1>
<article>
<h2>London</h2>
<p>London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>
</article>
<article>
<h2>Paris</h2>
<p>Paris is the capital and most populous city of France.</p>
</article>
<article>
<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan, the center of the Greater Tokyo Area, and the most populous metropolitan area in the world.</p>
</article>
</section>
</body>
</html>
Попробуйте сами »
Примечание от админа W3Schools на русском. На самом деле лучше размещать ссылку на скрипт HTML5Shiv в самом конце веб‑страницы, перед тегом </body> — это ускоряет загрузку страницы.
