HTML5. Підтримка браузерами

Курс по основам HTML | CSS. W3Schools українською. Уроки для початківців



Ви можете навчити старі браузери правильно обробляти 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: #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 (і раніших версій) не дозволяє стилювати невідомі елементи!

На щастя, 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

Синтаксис

<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>
Спробуйте самі! »


warning

Не викладайте свій код безпосередньо в коментарях, він відображається некоректно. Скористайтесь такими сервісами, як jsfiddle.net, codepen.io, liveweave.com, jsbin.com, збережіть код на будь-якому з цих сервісів і в коментарях дайте на нього посилання. Так буде видно і код, і результат.