Controlar la compatibilidad de HTML5 con Modernizr

Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedIn

HTML5 se ha convertido rápidamente en el término estrella de la web. Diseñadores y desarrolladores portamos el estandarte del HTML5 y prometemos a nuestros clientes webs y aplicaciones más avanzadas, rápidas y amigables al SEO. Al igual que pasó con el concepto “Web 2.0“, hoy en día vestimos todo de “HTML5” porque sabemos que es lo que vende y lo que venderá. Hasta que muera o inventen algo mejor.

No me malinterpretéis: ni pretendo ser irónico ni excesivamente crítico. HTML5 y todas las tecnologías que engloba son sin duda uno de los grandes avances de la web y eso lo defiendo a capa y espada.

Sin embargo, creo que, llevados por la euforia, podríamos olvidar que HTML5 es un proyecto que está vivo, creciendo y completándose. Algunos de los estándares no están definidos totalmente, otros no tienen soporte en el 100% de los navegadores actuales. También está Internet Explorer.

Te pregunto: ¿Sería lícito sacrificar a ese usuario que, por imposición o desconocimiento, aún usa un navegador obsoleto como Internet Explorer 8 en pos del avance de la web y de la humanidad? ¿Sería lícito sacrificar el progreso por ese mismo usuario?

La respuesta es “Ni una cosa ni la otra”. Y por eso existe Modernizr.

Modernizr, una herramienta indispensable

No lo digo yo, lo dice Bruce Bowman el Jefe de Producto de Adobe BrowserLab.

Logotipo de Modernizr

Modernizr es una excelente solución para el problema que nos planteabamos. Por si no lo conoces, Modernizr es una librería de Javascript que permite condicionar nuestro código para mostrar unas u otras características HTML5 según la compatibilidad del navegador. Así nuestro código será sólido frente a navegadores antiguos y fácil de “limpiar” cuando no tengamos que preocuparnos de navegadores antiguos.

Para descargar Modernizr entramos en su página oficial y vemos como mediante un formulario podremos seleccionar las diferentes características que podemos controlar. Este es un punto positivo de cara al rendimiento, ya que para cada proyecto podremos generar nuestro archivo .js ajustado a nuestras necesidades ocupando el tamaño mínimo.

Personalización de Modernizr

Una vez generado, el primer paso es enlazarlo en la cabecera de nuestro documento.

Trabajando con Modernizr

El uso de Modernizr podría dividirse en tres bloques:

  1. La detección de compatibilidad con nuevas etiquetas
  2. La detección de compatibilidad con APIs
  3. La detección de compatibilidad con CSS3

Compatibilidad con nuevas etiquetas

En el primer caso, Modernizr permite visualizar y dar estilo a las etiquetas propias de HTML5 en navegadores antiguos. Por defecto, IE8 ignorarían las etiquetas header, section, article, aside, nav… y todo lo que contuviesen provocando un completo desastre.
Esto no quiere decir que una etiqueta video empiece a funcionar en navegadores obsoletos, pero al menos, estará creada en el DOM y por tanto será susceptible de recibir estilos.

Compatibilidad con APIs

Modernizr te permite crear condiciones sencillas para discriminar si el navegador da soporte o no a cada API de HTML5.

Por ejemplo:

1
2
3
4
5
if(Modernizr.svg){
//Cargo mi SVG
}else{
//Cargo un png
}

Es tan simple como genial. Modernizr.svg tendrá el valor true si el navegador tiene compatibilidad con SVG, si no, podemos cargar una mapa de bits mediante la etiqueta img.

Igual podemos controlar el soporte a canvas, geolocation, localstorage y un largo etcétera.

Compatibilidad con CSS3

Si tras enlazar nuestro .js añadimos a la etiqueta html la clase ‘no-js‘, modernizr sustituirá esta clase por unas nuevas:

<html class='no-js'>
<!--Lo convierte a un tipo:-->
<html class=" js flexbox canvas canvastext webgl no-touch geolocation postmessage websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients cssreflections csstransforms csstransforms3d csstransitions fontface video audio localstorage sessionstorage webworkers applicationcache svg inlinesvg smil svgclippaths webkit chrome mac js">

¿Para qué te sirve esto? De esta forma puedes discriminar en tu hoja de estilos el soporte del navegador a nuevas características de CSS3.

Por ejemplo, podríamos controlar el uso de rgba:

1
2
3
4
5
6
7
.rgba .fondonegro50{
background: rgba(0, 0, 0, 0.5);
}

.no-rgba .fondonegro50{
background: url(../img/bgNegro50.png);
}

En el ejemplo diferenciamos tiene soporte a rgba (que añadiría la clase .rgba) o si no lo tiene (añadiría no-rgba) cargamos una imagen png que haría la transparencia.

En resumen

Como desarrolladores y diseñadores web tenemos una responsabilidad hacia el usuario final. Puesto que es prácticamente imposible que usando HTML5 nuestras webs se visualicen y actúen correctamente en navegadores antiguos, con Modernizr podremos al menos diferenciar qué capacidades de cada uno y mostrar en consecuencia un contenido que mantenga una buena experiencia de usuario.

Enlaces de interés

Modernizr: http://modernizr.com/
Dive into HTML5, detección de características: http://diveintohtml5.info/detect.html
The undetectables: https://github.com/Modernizr/Modernizr/wiki/Undetectables

Antonio Navajas (@ajnavajas) es desarrollador front-end, diseñador y formador ocasional. Apasionado por la tecnología, el diseño y en general por la cultura geek, colabora activamente en varios proyectos relacionados con la web, la formación y el diseño.

Comentarios arrow 4 Comentarios
  1. Muy bueno, artículos como éste ayudan a conocer herramientas tan buenas e interesantes como Modernizr.

  2. Gracias a herramientas como esta, podemos afirmar que ya no hay ningún tipo de excusa para no utilizar HTML5 en nuestros proyectos.
    Un gran ejemplo de como “Modernizrse” en la web 😉
    Gran artículo!

  3. Por cierto:

    Releyendo el artículo me he dado cuenta de que en la parte de la sustitución de la etiqueta “no-js”, el código que pegas da dos clases al final: “chrome” y “mac”.

    Esto lo hace automático o hay que personalizar el script para que te de estos valores?

    Lo pregunto porque a mí no me los genera automáticamente :(

  4. Hay que tener en cuenta que Modernizr tiene algunos falsos positivos como los input de tipo number. A mi entender, tampoco es fiable 100%…

Responder a Miguel Morera Cancelar respuesta

Tu e-mail no será publicado. Los campos marcados con un asterisco son obligatorios.