HTML5 Поддержка браузера
Вы можете научить старых браузеров правильно обрабатывать HTML5.
Поддержка браузера HTML5
HTML5 поддерживается во всех современных браузерах.
Кроме того, все браузеры, старые и новые, автоматически обрабатывают нераспознанные элементы как встроенные элементы.
Из-за этого, вы можете "научить" старых браузеров для обработки "неизвестных" HTML элементов.
Вы даже можете научить IE6 (Windows XP 2001), как обрабатывать неизвестные элементы HTML.
Определение семантических элементов в качестве элементов блока
HTML5 определяет восемь новых семантических элементов. Все эти элементы являются элементами уровня блока .
Чтобы обеспечить правильное поведение в старых браузерах, можно задать для этих HTML-элементов свойство Display CSS для Block:
header, section, footer, aside, nav, main, article, figure {
display: block;
}
Добавление новых элементов в HTML
Вы также можете добавить новые элементы на страницу HTML с помощью браузера трюк.
В этом примере добавляется новый элемент с именем <myHero> на HTML-страницу и определяется его стиль:
Пример
<!DOCTYPE html>
<html>
<head>
<script>document.createElement("myHero")</script>
<style>
myHero {
display: block;
background-color: #dddddd;
padding: 50px;
font-size: 30px;
}
</style>
</head>
<body>
<h1>A Heading</h1>
<myHero>My Hero Element</myHero>
</body>
</html>
Инструкция JavaScript document.createElement("myHero") необходима для создания нового элемента в IE 9 и более ранних версиях.
Проблема с Internet Explorer 8
Для всех новых элементов HTML5 можно использовать описанное выше решение.
Однако IE8 (и более ранние версии) не допускает стилизации неизвестных элементов!
К счастью, сьюрд Вишер создал HTML5Shiv! HTML5Shiv — это обходной путь JavaScript, позволяющий использовать стили HTML5-элементов в версиях Internet Explorer до версии 9.
Вам потребуется HTML5Shiv для обеспечения совместимости для IE браузеров старше 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
Синтаксис
<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>