Las etiquetas semánticas de HTML5 con Explorer

Entrada en la que se explica cómo conseguir que el Explorer interprete de forma correcta las nuevas etiquetas semánticas de HTML5

picasso

archivado en: HTML/CSS / 5 noviembre, 2012 / taller:

Seguimos con las nuevas etiquetas semánticas de HTML5. Como vimos, son un gran avance para la web semántica, pero no se pueden emplear sin más, ya que en Internet existe una especie de zombi indestructible que dificulta cualquier progreso. Claro está, me refiero a la tostadora al Explorer.

Firefox, Chrome, Safari, Opera... son navegadores que se actualizan casi solos, por lo que apenas navega nadie con versiones antiguas, pero la actualización del Explorer es un proceso complicado para muchas personas y las versiones previas al IE9, la primera capaz de interpretar las etiquetas semánticas, son aún muy numerosas.

Por lo tanto, no queda más remedio que hacer algún apaño que permita compatibilizar las etiquetas semánticas con el Explorer, pero lo bueno es que se puede conseguir sin demasiado esfuerzo.

Algunas posibilidades:

a) HTML5 Shiv

Esta fórmula es la que usan en WordPress y es la más sencilla. Consiste en incluir en la página un script llamado HTML5 Shiv, desarrollado por Alexander Farkas, Jonathan Neal y Paul Irish, que se puede descargar desde Google .

Se descomprime, se sube el archivo html5shiv.js al server y, mejor después de las CSS, se añade este script:

  • <!--[if IE 6]>
  • <script src="RUTA/html5shiv.js"></script>
  • <![endif]-->
  • <!--[if IE 7]>
  • <script src="RUTA/html5shiv.js"></script>
  • <![endif]-->
  • <!--[if IE8]>
  • <script src="RUTA/html5shiv.js"></script>
  • <![endif]-->

Además, es recomendable añadir esto en las CSS para forzar que los nuevos tags se comporten como un bloque:

  • article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
  • display: block;
  • }

Y también es importante que los estilos no se apliquen directamente sobre los elementos, sino sobre identificadores o clases añadidos como atributos.

Peor

  • HTML
  • <article>
  • ...
  • </article>
  • CSS
  • section {
  • color:#900;
  • }

Mejor

  • HTML
  • <article class="mi_estilo">
  • ...
  • </article>
  • CSS
  • .mi_estilo {
  • color:#900;
  • }

b) Modernizr

HTML5 Shiv es un script que forma parte de una librería más amplia de JavaScript  llamada Modernizr. Si vamos a usar en una web más características de HTML5 incompatibles con el Explorer (ver cuáles son en Readines), es mejor si se incluye la librería completa. Como tengo pensado escribir una entrada sobre el tema, de momento lo dejo aquí.

c) Duplicar tags

Por último, otra fórmula, nada ortodoxa ya que ensucia mucho el código, es duplicar los tags y declarar por fuera divs normales:

  • <div class="mi_estilo">
  • <article>
  • ...
  • </article>
  • </div>

Los talibanes del código se ponen histéricos con esta solución, pero el caso es que funciona.

Ahora bien, creo que son mejores las dos anteriores por una razón. El único inconveniente que tienen es que, si el usuario ha desactivado JavaScript, se produce el desastre. Sin embargo, no creo que las personas que navegan con el Explorer, por lo general, poco avezadas en informática, sepan ni siquiera qué es JavaScript. Por lo tanto, no vale la pena ensuciar el código si con un pequeño script ya está todo solucionado.

Hay otras soluciones, como declarar los elementos en XML, pero con usar alguna de las mencionadas es suficiente.

Abrazos++;

|| Tags: , ,

valoración de los lectores sobre Las etiquetas semánticas de HTML5 con Explorer

  • estrellica valoración positiva
  • estrellica valoración positiva
  • estrellica valoración positiva
  • estrellica valoración negativa
  • estrellica valoración negativa
  • 3 sobre 5 (2 votos)

¿Te ha parecido útil o interesante esta entrada?
dormido, valoración 1 nadapensativo, valoración 2 un poco sonrisa, valoración 3 a medias guiño, valoración 4 bastante aplauso, valoración 5 mucho

Tú opinión es muy importante, gracias por compartirla!

Una respuesta a “Las etiquetas semánticas de HTML5 con Explorer