Você pode ensinar os navegadores mais antigos para lidar com HTML5 corretamente.
Suporte a navegadores HTML5
HTML5 é compatível com todos os navegadores modernos.
Além disso, todos os navegadores, antigos e novos, tratar automaticamente elementos não reconhecidos como elementos inline.
Devido a isso, você pode "teach" os navegadores mais antigos para lidar com "unknown" elementos HTML.
Você pode até mesmo ensinar IE6 (Windows XP 2001) como lidar com elementos HTML desconhecidas.
Definir HTML5 Elementos como Bloco Elements
HTML5 define oito novos elementos HTML semânticos. Todos estes são elementos nível de bloco.
Para garantir o comportamento correto em navegadores mais antigos, você pode definir a propriedade de exibição CSS para bloquear:
header, section, footer, aside, nav, main, article, figure {
display: block;
}Acrescentando novos elementos para HTML
Você também pode adicionar qualquer elemento novo para HTML com um truque browser.
Este exemplo adiciona um novo elemento chamado <myHero> para HTML, e define um estilo de exibição para ele:
Exemplo
<!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> Tente você mesmo " A declaração JavaScript document. createElement("myHero") document. createElement("myHero") é adicionado, apenas para satisfazer IE.
Problema com Internet Explorer
Você pode usar a solução descrita acima, para todos os novos elementos HTML5, mas:
Internet Explorer 8 e versões anteriores, não permite um estilo de elementos desconhecidos.
Felizmente, Sjoerd Visscher criou o "HTML5 Enabling JavaScript" , " the shiv ":
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->O código acima é um comentário, mas as versões anteriores para IE9 vai lê-lo (and understand it) .
The Complete Shiv Solution
Exemplo
<!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>My First Article</h1>
<article>
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.
</article>
</body>
</html> Tente você mesmo " O link para o shiv código deve ser colocado no <head> elemento, porque o Internet Explorer precisa de saber sobre todos os novos elementos antes de lê-los.
Um HTML5 Skeleton
Exemplo
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML5 Skeleton</title>
<meta charset="utf-8">
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js">
</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 SKeleton</h1>
</header>
<nav>
<ul>
<li><a href="html5_semantic_elements.asp">HTML5 Semantic</a></li>
<li><a href="html5_geolocation.asp">HTML5 Geolocation</a></li>
<li><a href="html5_canvas.asp">HTML5 Graphics</a></li>
</ul>
</nav>
<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>
<footer>
<p>© 2014 w3ii. All rights reserved.</p>
</footer>
</body>
</html> Tente você mesmo "