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> на HTML сторінку і визначається його стиль:
Приклад
<!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") необхідно для створення нового елемента в IE 9 і більш ранніх версіях.
Проблема з Internet Explorer 8
Ви можете використовувати рішення, описане вище для всіх нових елементів HTML5.
Однак IE8 (і раніші версії) не допускають стилізацію невідомих йому елементів!
Але, слава Богу, Sjoerd Visscher створив 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, (або альтернативно новіша версія на нашому сайті: 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> (для прискорення завантаження сторінки).
