Usted puede enseñar a los navegadores antiguos para manejar HTML5 correctamente.
Soporte del navegador HTML5
HTML5 es compatible con todos los navegadores modernos.
Además, todos los navegadores, antiguos y nuevos, manejar automáticamente los elementos no reconocidos como elementos en línea.
Debido a esto, se puede "teach" navegadores antiguos para manejar "unknown" elementos HTML.
Incluso se puede enseñar a IE6 (Windows XP 2001) cómo manejar los elementos HTML desconocidos.
Definir HTML5 elementos como elementos de bloque
HTML5 define ocho nuevos elementos HTML semánticas. Todos estos son elementos a nivel de bloque.
Para asegurar el correcto comportamiento en los navegadores antiguos, se puede establecer la propiedad CSS display para bloquear:
header, section, footer, aside, nav, main, article, figure {
display: block;
}Añadiendo nuevos elementos a HTML
También puede añadir cualquier nuevo elemento a HTML con un truco navegador.
Este ejemplo añade un nuevo elemento llamado <myHero> a HTML, y define un estilo de visualización para ello:
Ejemplo
<!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> Inténtalo tú mismo " La declaración de JavaScript document. createElement("myHero") document. createElement("myHero") se añade, sólo para satisfacer IE.
Problema con Internet Explorer
Se podría utilizar la solución descrita anteriormente, para todos los nuevos elementos de HTML5, pero:
Internet Explorer 8 y versiones anteriores, no permite un estilo de elementos desconocidos.
Afortunadamente, Sjoerd Visscher creó la "HTML5 Enabling JavaScript" , " the shiv ":
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->El código anterior es un comentario, pero las versiones anteriores a IE9 va a leer (and understand it) .
The Complete Shiv Solución
Ejemplo
<!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> Inténtalo tú mismo " El enlace a la shiv código debe ser colocado en el <head> elemento, porque Internet Explorer necesita saber acerca de todos los elementos nuevos antes de leerlos.
Un esqueleto HTML5
Ejemplo
<!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> Inténtalo tú mismo "