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

Вы можете помочь старым браузерам обрабатывать HTML5.

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

Все современные браузеры поддерживают HTML5.

Кроме того, все браузеры, новые и старые, автоматически считают неопознанные элементы как inline-элементы.

Благодаря этому вы можете помочь старым браузерам обрабатывать "неизвестные" элементы HTML.

Комментарий:Вы даже можете научить каменный век IE6, как обрабатывать неизвестные элементы HTML.

определить элементы HTML5 как блочные элементы

HTML5 определил восемь новыхсемантические элементы HTML. Все ониблочныеэлементы.

Вы можете использовать CSS display атрибут установлен в blockчтобы обеспечить правильное поведение в старых браузерах:

Пример

header, section, footer, aside, nav, main, article, figure {
    display: block; 
}

Добавление новых элементов в HTML

Вы можете добавить к HTML любые новые элементы с помощью browser trick:

В этом примере к HTML добавлен элемент с именем <myHero> новые элементы и определить для них стиль display:

Пример

<!DOCTYPE html>
<html>
<head>
  <title>Creating an HTML Element</title>
  <script>document.createElement("myHero")</script>
  <style>
  myHero {
    display: block;
    background-color: #ddd;
    padding: 50px;
    font-size: 30px;
  } 
  </style> 
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
<myHero>My First Hero</myHero>
</body>
</html>

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

Добавленные строки JavaScript document.createElement("myHero"), только для IE.

Проблемы Internet Explorer

Этот план можно использовать для всех новых элементов HTML5, но:

Примечание:Internet Explorer 8 и более ранние версии не позволяют добавлять стили к неизвестным элементам.

К счастью, Sjoerd Visscher создал "HTML5 Enabling JavaScript", "the shiv":

<![if lt IE 9]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

Этот код является комментарием, но早期的版本 IE9 будут его читать (и понимать).

Полное решение Shiv

Пример

<!DOCTYPE html>
<html>
<head>
  <title>Styling HTML5</title>
  <![if lt IE 9]>
  <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
  <![endif]-->
</head>
<body>
<h1>Моя первая статья</h1>
<article>
Лондон является столицей Англии. 
Это самый населенный город в Великобритании: 
с metropolitan area, населяемой более 13 миллионами жителей.
</article>
</body>
</html>

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

Ссылка на код shiv должна быть расположена в элементе <head>, так как Internet Explorer должен узнать о всех новых элементах до их чтения.

HTML5 Схема

Пример

<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML5 Схема</title>
<meta charset="utf-8">
<![if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
</script>
<![endif]-->
<style>
body {font-family: Verdana, sans-serif; font-size:0.8em;}
header,nav, section,article,footer
{border:1px solid grey; margin:5px; padding:8px;}
nav ul {margin:0; padding:0;}
nav ul li {display:inline; margin:5px;}
</style>
</head>
<body>
<header>
  <h1>HTML5 Схема</h1>
</header>
<nav>
<ul>
  <li><a href="html5_semantic_elements.asp">HTML5 Семантические элементы</a></li>
  <li><a href="html5_geolocation.asp">HTML5 Geolocation</a></li>
  <li><a href="html5_canvas.asp">Графика HTML5</a></li>
</ul>
</nav>
<section>
<h1>Известные города</h1>
<article>
<h2>Лондон</h2>
<p>Лондон является столицей Англии. Это наиболее населенный город в Великобритании,</p>
<p>с мегаполисом, населенным более 13 миллионами жителей.</p>
</article>
<article>
<h2>Париж</h2>
<p>Париж является столицей и наиболее населенным городом Франции.</p>
</article>
<article>
<h2>Токио</h2>
<p>Токио является столицей Японии, центром Большого Токио.</p>
и это наиболее населенный мегаполис в мире.</p>
</article>
</section>
<footer>
<p>© 2016 CodeW3C.com. Все права защищены.</p>
</footer>
</body>
</html>

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