Mi primera web en HTML5 III. Elementos estructurales de HTML5 compatibles en todos los navegadores con Modernizr

Como ya expliqué en Mi primera web en HTML5, un poco de historia, la especificación actual de HTML5 se encuentra en el estado Last Call. Eso quiere decir que HTML5 es un borrador bastante avanzado.

Tampoco hay que olvidar que la especificación actual del W3C está sujeta a cambios porque todavía no es un estándar y que hay partes del HTML5 aún en desarrollo; tal es el caso de la etiqueta multimedia device.

Recordemos, por otra parte, que las versiones antiguas de Internet Explorer son incompatibles con las nuevas características de CSS3 y HTML5. Para poner la guinda al pastel, observemos que no todos los navegadores modernos entienden el HTML5 de la misma manera.

En el escenario que acabamos de describir, Modernizr viene al rescate para que los desarrolladores Web nos actualicemos fácilmente a HTML5. Modernizr no va a modernizar IE6, IE7 e IE8 por arte de magia, sino que brinda una funcionalidad para que tú puedas adaptar tus páginas HTML5 a los navegadores que no detectan una característica determinada.

La historia está en desarrollar en HTML5 y en adaptar las incompatibilidades que van a presentar los navegadores antiguos. De ahí el nombre. Modernizr nos invita a cambiar el chip, a empezar a pensar ya en HTML5.

En palabras de los desarrolladores de Modernizr, “Modernizr es una pequeña librería JavaScript que detecta la disponibilidad de implementaciones nativas para tecnologías web de última generación, es decir, funciones que se derivan de las especificaciones de HTML5 y CSS3. Muchas de estas características ya están implementadas en varios navegadores. Lo que hace Modernizr es, simplemente, decirte si tal o cual navegador tiene esta característica de forma nativa”.

Para cumplir con su objetivo, Modernizr utiliza la técnica de detección de características (feature detection), mucho más fiable que la técnica de detección del agente de usuario o navegador (user agent sniffing), haciendo 18 comprobaciones CSS3 y más de 40 comprobaciones relacionadas con HTML5. El conjunto de pruebas que lleva a cabo tarda microsegundos en completarse.

Por lo que respecta al potencial de esta librería, según David Powers de Adobe, autor del artículo Using Modernizr to detect HTML5 and CSS3 browser support , la utilidad de Modernizr reside esencialmente en las habilidades JavaScript y CSS del desarrollador que la utiliza.

Download de Modernizr

Hay dos versiones de Modernizr: desarrollo y producción. Este esquema es muy común en las librerías JavaScript. Si estás familiarizado con sistemas tipo JQuery ya sabrás que, generalmente, la única diferencia entre la versión de desarrollo y la versión de producción es que la versión de producción ocupa menos porque no tiene espacios en blanco ni comentarios.

Modernizr es un poco diferente en este sentido: el Modernizr de producción, disponible en http://www.modernizr.com/download/, es completamente personalizable. Si sólo seleccionamos los elementos que realmente necesitamos, Modernizr ocupará muy poco.

Para experimentar es recomendable la versión de desarrollo. Obtener una copia de la versión de desarrollo es tan sencillo como localizar la carpeta JavaScript de tu proyecto web HTML5 y ejecutar el siguiente comando:

curl https://www.modernizr.com/downloads/modernizr-latest.js > modernizr.js

Elementos estructurales de HTML5 compatibles en todos los navegadores

Las versiones antiguas de IE no reconocen los elementos estructurales de HTML5. Para asegurarte de que tus páginas se ven bien en todos los navegadores sólo tienes que llamar a Modernizr y éste se encargará de que estos navegadores consigan reconocer los nuevos elementos.

<script type="text/javascript" src="public/js/modernizr.js"></script>

Lo anterior vendría a ser el equivalente del siguiente código JavaScript de ejemplo que crea manualmente algunos elementos HTML5:

document.createElement('header');
document.createElement('nav');
document.createElement('section');
document.createElement('article');
document.createElement('aside');
document.createElement('footer');
document.createElement('hgroup');

Finalmente, debes definir la propiedad CSS display:block en los elementos estructurales de HTML5:

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

Continuará…

¿Sabías que con HTML5 puedes validar formularios de forma nativa? ¡Eso es fantástico! Próximamente explicaré cómo detectar las capacidades del navegador de turno para hacer cosas concretas; por ejemplo, veremos cómo tomar la decisión de validar un formulario con JavaScript en los navegadores antiguos.

Hoy hemos visto cómo hacer que todos los navegadores pinten correctamente los elementos estructurales de HTML5, pero recuerda que lo más importante de Modernizr es que puede detectar el soporte HTML5 de un navegador determinado.