ЛУЧШИЙ САЙТ ДЛЯ РАЗРАБОТЧИКОВ
×

HTML5 Tutorial

HTML HOME HTML Introduction HTML Editors HTML Basic HTML Elements HTML Attributes HTML Headings HTML Paragraphs HTML Styles HTML Formatting HTML Quotations HTML Comments HTML Colors HTML CSS HTML Links HTML Images HTML Tables HTML Lists HTML Blocks HTML Classes HTML Id HTML Iframes HTML JavaScript HTML File Paths HTML Head HTML Layout HTML Responsive HTML Computercode HTML Entities HTML Symbols HTML Charset HTML URL Encode HTML XHTML

HTML Forms

HTML Forms HTML Form Elements HTML Input Types HTML Input Attributes

HTML5

HTML5 Intro HTML5 Support HTML5 New Elements HTML5 Semantics HTML5 Migration HTML5 Style Guide

HTML Graphics

HTML Canvas HTML SVG HTML Google Maps

HTML Media

HTML Media HTML Video HTML Audio HTML Plug-ins HTML YouTube

HTML APIs

HTML Geolocation HTML Drag/Drop HTML Web Storage HTML Web Workers HTML SSE

HTML Examples

HTML Examples HTML Accessibility

HTML References

HTML Tag List HTML Attributes HTML Events HTML Colors HTML Canvas HTML Audio/Video HTML Doctypes HTML Character Sets HTML URL Encode HTML Lang Codes HTTP Messages HTTP Methods PX to EM Converter Keyboard Shortcuts

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>