html html5 internet-explorer internet-explorer-8 semantic-markup

elementos semánticos html5 y navegadores antiguos



internet-explorer internet-explorer-8 (4)

Estoy a punto de diseñar un nuevo diseño para una página web y quería aprovechar este momento para implementar algo de marcado html5.

Lo primero que me viene a la mente son los elementos semánticos (nav, header, article ..)

Después de comprobar http://caniuse.com/#feat=html5semantic noté que IE8 (y más abajo) no son compatibles con los elementos. Esto probablemente significa que no puedo estilizar los elementos semánticos esperando un resultado coherente.

El sitio web recibe mucho tráfico de los navegadores IE7 / 8 y no sé cómo proceder. Escuché sobre modernizr y html5shiv pero no sé cuál es el mejor estándar hoy en día ...


Como solo está buscando un método para diseñar elementos HTML5, use HTML5Shiv (que está específicamente diseñado para este fin). Modernizr contiene muchas más características. que no vas a usar (a juzgar por la pregunta).

Aquí está el código fuente, en caso de que se lo esté preguntando: https://github.com/aFarkas/html5shiv/blob/master/src/html5shiv.js


No hay forma de que las versiones antiguas de IE reconozcan los nuevos elementos, excepto a través de scripts en el lado del cliente. Si decide que el uso que no es JavaScript es ignorable, puede usar algunas de las herramientas mencionadas en otras respuestas, o puede hacerlo usted mismo: la técnica es extraña, pero no ciencia espacial en absoluto, por ejemplo

<script> document.createElement(''nav''); document.createElement(''header''); document.createElement(''article''); </script>

Una solución más robusta es usar el marcado div con el atributo de class (o id ), además de usar los nuevos elementos, por ejemplo

<nav><div="nav">...</div></nav>

y para establecer sus estilos utilizando selectores de clase (o id) como .nav . Esto sería robusto y también le daría los beneficios de usar marcas supuestamente semánticas como nav . (No se han presentado beneficios tangibles, pero tal vez surjan algunos).


Puedes diseñarlos. Solo tiene que ejecutar HTML5shiv o Modernizr . También querrás agregar un poco de CSS para que se bloqueen de manera predeterminada.

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