HTML5 Поддержка браузерами

Курс по основам HTML5. W3Schools на русском языке. Уроки для начинающих

❮ Prev Next ❯

Вы можете научить старые браузеры правильно обрабатывать 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

Синтаксис

HTML5Shiv Пример

Если вы не желаете загружать и сохранять HTML5Shiv на своём сайте, можно ссылаться на версию, которая находится на сайте CDN.

Скрипт HTML5Shiv должен быть расположен в элементе <head> после любых таблиц стилей:

Пример:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">

</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>

Попробуйте сами »

❮ Prev Next ❯