HTML5 Compatibilidad con navegadores
Puedes enseñar a los navegadores antiguos a manejar correctamente HTML5.
Compatibilidad de HTML5 con los navegadores
HTML5 es compatible con todos los navegadores modernos.
Además, todos los navegadores, tanto antiguos como nuevos, tratan automáticamente los elementos no reconocidos como elementos en línea.
Gracias a esto, puedes “enseñar” a los navegadores antiguos a trabajar con elementos HTML que les resultan “desconocidos”.
Incluso puedes enseñar a IE6 (Windows XP 2001) a manejar elementos HTML desconocidos.
Definir elementos semánticos como elementos de nivel de bloque
HTML5 define ocho nuevos elementos semánticos. Todos ellos son elementos de nivel de bloque.
Para garantizar un comportamiento correcto en navegadores antiguos, puedes establecer la propiedad CSS display de estos elementos HTML en block:
header, section, footer, aside, nav, main, article, figure {
display: block;
}
Agregar nuevos elementos a HTML
También puedes añadir nuevos elementos a una página HTML utilizando un truco del navegador.
En este ejemplo, se añade a la página HTML un nuevo elemento llamado <myHero> y se define su estilo:
Ejemplo
<!DOCTYPE html>
<html>
<head>
<script>document.createElement("myHero")</script>
<style>
myHero {
display: block;
background-color: #ddd;
padding: 50px;
font-size: 30px;
}
</style>
</head>
<body>
<h1>Un encabezado</h1>
<myHero>Mi elemento Hero</myHero>
</body>
</html>
Pruébalo tú mismo »
La declaración de JavaScript document.createElement("myHero") es necesaria para crear un nuevo elemento en IE9 y versiones anteriores.
Problema con Internet Explorer 8
Puedes usar la solución descrita arriba para todos los nuevos elementos de HTML5.
Sin embargo, IE8 (y versiones anteriores) no permite aplicar estilos a los elementos que no reconoce.
Pero, afortunadamente, Sjoerd Visscher creó HTML5Shiv. HTML5Shiv es una solución alternativa en JavaScript que permite aplicar estilos a los elementos de HTML5 en versiones de Internet Explorer anteriores a la versión 9.
Necesitarás HTML5shiv para garantizar la compatibilidad con los navegadores IE anteriores a IE9.
Sintaxis de HTML5Shiv
HTML5Shiv suele colocarse dentro de la etiqueta <head>.
HTML5Shiv es un archivo JavaScript referenciado mediante una etiqueta <script>.
Puedes usar HTML5Shiv cuando utilices nuevos elementos de HTML5 como <article>, <section>, <aside>, <nav>, <footer>.
Puedes descargar la última versión de HTML5Shiv desde GitHub o enlazar la versión CDN https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js, (o, alternativamente, una versión más reciente en nuestro sitio: html5shiv.js)
Sintaxis
<head>
<!--[if lt IE 9]>
<script src="/js/html5shiv.js"></script>
<![endif]-->
</head>
Ejemplo de HTML5Shiv
Si no deseas descargar y almacenar el script HTML5Shiv en tu propio sitio, puedes hacer referencia a la versión proporcionada en un CDN.
El script HTML5Shiv suele colocarse dentro del elemento <head>, después de cualquier hoja de estilo:
Ejemplo
<!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>Ciudades famosas</h1>
<article>
<h2>Londres</h2>
<p>Londres es la capital de Inglaterra. Es la ciudad más poblada del Reino Unido, con un área metropolitana de más de 13 millones de habitantes.</p>
</article>
<article>
<h2>París</h2>
<p>París es la capital y la ciudad más poblada de Francia.</p>
</article>
<article>
<h2>Tokio</h2>
<p>Tokio es la capital de Japón, el centro del Área del Gran Tokio y la zona metropolitana más poblada del mundo.</p>
</article>
</section>
</body>
</html>
Pruébalo tú mismo »
Nota del administrador W3SchoolsES. ElMejor. De hecho, es mejor colocar la referencia al script HTML5Shiv al final de la página web, justo antes de la etiqueta </body> (para acelerar la carga de la página).
