HTML5 Soporte del navegador

Puedes hacer que algunos navegadores antiguos (que no soportan HTML5) soporten HTML5.

Soporte de navegadores HTML5

Los navegadores modernos soportan HTML5.

Además, todos los navegadores, incluidos los antiguos y los más recientes, tratan automáticamente los elementos no reconocidos como elementos en línea.

Por eso, puedes"enseñar"al navegador a procesar"desconocidos"elementos HTML.

Note Incluso puedes enseñar al navegador IE6 (Windows XP 2001) a procesar elementos HTML desconocidos.

Definir elementos HTML5 como elementos de bloque

HTML5 define 8 nuevos HTMLsemánticos (semantic)elementos. Todos estos elementos sonde bloqueelementos.

Para que los navegadores de versiones antiguas muestren correctamente estos elementos, puedes configurar eldisplayvalor de la propiedad CSS comoblock:

Ejemplo

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

Agregar nuevos elementos a HTML

Puedes agregar nuevos elementos a HTML.

Este ejemplo agrega un nuevo elemento a HTML, define un estilo para el elemento y su nombre es<myHero> ：

Ejemplo

<!DOCTYPE html> <html> <head> <meta charset="utf-8">  <title>Agregar nuevos elementos a HTML</title> <script>
document.createElement("myHero")
</script> <style>
myHero { display: block; background-color: #ddd; padding: 50px; font-size: 30px; }
</style> </head> <body> <h1>Mi primer título</h1> <p>Mi primer párrafo.</p> <myHero>Mi primer elemento nuevo</myHero> </body> </html>

Pruébalo »

Sentencia de JavaScriptdocument.createElement("myHero")es para agregar nuevos elementos al navegador IE.

Problemas con el navegador Internet Explorer

Puedes usar el método anterior para agregar elementos HTML5 al navegador IE, pero:

Note Internet Explorer 8 y versiones anteriores de IE no admiten el método anterior.

Podemos usar el "HTML5 Enabling JavaScript" creado por Sjoerd Visscher, shiv" para resolver este problema:

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

El código anterior es un comentario; su función es leer el archivo html5.js cuando la versión del navegador IE sea menor que IE9 y analizarlo.

Nota:Los usuarios en China deben usar la biblioteca de recursos estáticos de este sitio (la biblioteca de recursos de Google es inestable en China):

<!--[if lt IE 9]>
  <script src="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/html5shiv/3.7.3/html5shiv.min.js"></script>
<![endif]-->

Para el navegador IE, html5shiv es una buena solución. html5shiv resuelve principalmente el problema de que los nuevos elementos propuestos por HTML5 no son reconocidos por IE6-8; estos nuevos elementos no pueden usarse como nodo padre para envolver elementos secundarios, y no se les pueden aplicar estilos CSS.

La solución Shiv perfecta

Ejemplo

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Renderizar HTML5</title> <!--[if lt IE 9]> <script src="https://lf6-cdn-tos.bytecdntp.com/cdn/expire-1-M/html5shiv/3.7.3/html5shiv.min.js"></script> <![endif]--> </head> <body> <h1>Mi primer artículo</h1> <article>Tutorial de novatos — ¡no solo se aprende tecnología, sino también sueños!</article> </body> </html>

Pruébalo »

El código de referencia de html5shiv.js debe colocarse dentro del elemento <head>, porque el navegador IE necesita cargar este archivo antes de analizar los nuevos elementos HTML5.

Otras extensiones