En el presente artículo vamos a presentar Modernizr, un componente que puede hacer la vida más sencilla a los desarrolladores que tienen que crear páginas web compatibles con distintos navegadores. Es ideal para aquellos profesionales que desean utilizar las tecnologías más modernas, incluso aquellas que están en fase de especificación como CSS3 y HTML5 y que pocos navegadores soportan, sin dejar de producir sitios web que funcionen correctamente en clientes web más antiguos.

Modernizr no es el típico framework Javascript, aunque podríamos llamarle así. Me explico. En realidad no es una librería que nos permita implementar con menor esfuerzo proyectos avanzados, sino un paquete de detección de las capacidades de un navegador relativas a HTML5 y CSS3. Dicho de otro modo, Modernizr es una librería Javascript que nos informará cuáles de las novedosas capacidades de estos lenguajes están disponibles en el navegador del usuario, para utilizarlas, o no, en cada caso.

Sabiendo que nuestro navegador soporta ciertas capacidades de CSS3 o de HTML5, podremos utilizarlas con libertad. De modo contrario, si sabemos que un navegador no es compatible con determinada funcionalidad, podremos implementar variantes que sí soporte y así crear sitios web que se adaptan perfectamente al cliente web de cada visitante.

Puedes encontrar Modernizr en: http://www.modernizr.com

Herramientas de Modernizr para detección de funcionalidades

Existen dos herramientas principales en Modernizr que se pueden utilizar para detectar las funcionalidades que están presentes en un navegador. Una la podemos utilizar en scripts Javascript y otra directamente sobre código CSS.

Objeto Javascript:
Una vez que carguemos las librerías de Modernizr tendremos a nuestra disposición un objeto Javascript que tiene una serie de propiedades que nos sirven para saber cuándo una funcionalidad concreta está disponible, o no, en un navegador. Esas propiedades tienen siempre valores boleanos (true o false), que podemos evaluar para hacer o no uso de las funcionalidades avanzadas que deseemos, sabiendo que realmente están disponibles.

Clases CSS:
Además, modernizr crea una serie de clases CSS que nos servirán, de una manera ingeniosa, para asignar estilos CSS3 únicamente cuando son soportados y que nos permitirán aplicar estilos alternativos cuando no se dispongan.

Qué funcionalidades detecta Modernizr

En resumen, con Modernizr podemos detectar las funcionalidades básicas de CSS3 y HTML5.

En el caso de CSS3, detecta si están o no implementados atributos para hacer bordes redondeados, sombras de cajas, imágenes en los bordes, colores rgba, múltiples fondos, etc. Además, existen formas de detectar si las animaciones CSS están implementadas en el navegador, las columnas CSS, los degradados, transformaciones, etc.

Por lo que respecta a HTML5, Modernizr es capaz de informarnos sobre la existencia o no de soporte a etiquetas como AUDIO, VIDEO y lo que será más importante, a diversas API que estarán disponibles en dicha versión del lenguaje de marcación, como Local Storage, Session Storage, Web Sockets, geolocalización, SVG, etc.

Polyfills en Modernizr

Hasta ahora hemos hablado siempre de "detección" de funcionalidades, nunca de ampliación de las características de los navegadores y es que Modernizr es justamente eso, una librería para detectar el soporte a las distintas características de los navegadores más modernos. Sin embargo, existe también una conexión entre Modernizr y lo que se llaman "Polyfills".

Un Polyfill o Polyfiller es una librería o plugin para ampliar las funcionalidades de navegadores antiguos que no soportan funcionalidades modernas. Para entender bien ese concepto pensemos en HTML 5, que trae consigo diversas API para trabajar con Local Storage o Web Sockets, etc. Hoy pocos navegadores soportan esas tecnologías y si hablamos de navegadores antiguos, pues el soporte es todavía menor. Entonces, podemos cargar un Polyfill en el navegador para que sea compatible con algunas de esas tecnologías.

El Polyfill no tiene por qué estar construido de la misma manera que el API nativo en los navegadores, pero es como un emulador, que nos proveerá de la misma interface, de modo que podamos trabajar en clientes web antiguos de la misma manera como trabajaríamos en los modernos.

Los Polyfill no forman parte de Modernizr específicamente, pero éste sí proporciona elementos para cargarlos en el navegador cuando no se tenga soporte nativo. De es modo podemos tener un soporte instantáneo a algunas funcionalidades del HTML5 que están por venir, aunque ello vaya a veces en detrimento del desempeño del cliente web.

Carga de Polyfills con Modernizr.load()

En el paquete básico de Modernizr no está disponible, pero entre varios "Extra" que podremos seleccionar en la página de download, encontraremos un método llamado Modernizr.load() que sirve para cargar Pollyfills.

Con Modernizr.load() y el objeto Javascript Modernizr, que almacena boleanos sobre si existe o no soporte a diversas funcionalidades, tenemos todo lo que necesitamos para cargar cómodamente los Pollyfills necesarios para ampliar el soporte de nuestro navegador a características de HTML5 y CSS3.

Desde la propia documentación de Modernizr aconsejan utilizar los Pollyfills con cuidado, porque puede bajar el rendimiento de los navegadores, no obstante, se nos antojan una vía excelente para poder innovar en el desarrollo y mantener soporte hacia atrás con navegadores antiguos.

En próximos artículos trataremos el método Modernizr.load() con detalle y estudiaremos más acerca de la carga de Pollyfills.

Conclusión

Modernizr es un complemento que agradará a los desarrolladores que quieren utilizar las últimas tecnologías, pero que están comprometidos con la compatibilidad y accesibilidad de sus creaciones. Quizás, cuando empieces a utilizarlo, encuentres que ha conquistado un lugar destacado entre tus herramientas de desarrollo.

Sus funcionalidades básicas, para detección de soporte a HTML5 y CSS3, ya son bastante interesantes de por si. Pero además, con la posibilidad de cargar pollyfills, se convierte en una herramienta potente que nos permitirá adelantarnos a diversos estándares que aun no están universalizados.

Vídeo en directo presentación de Modernizr

Para acabar voy a embeber aquí un vídeo que seguro resultará de interés si pretendes conocer un poco mejor Modernizr y dar tus primeros pasos con estas librerías. En esta presentación, que fue retransmitida en directo os hablo de las etiquetas semánticas del HTML5 y cómo puedes hacer que todos los navegadores sean compatibles con ellas a través de Modernizr y su "extra" HTML5shiv.