Presentación de Modernizr

  • Por
Modernizr es una librería Javascript que nos permite conocer la compatibilidad del navegador con tecnologías HTML5 y CSS3, para hacer sitios web que se adaptan a cada browser.
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.

Nota: En esta primera introducción a Modernizr no voy a entrar a explicar el uso de las mencionadas herramientas. Lo veremos con detenimiento en futuros artículos. De momento quiero simplemente dar un repaso general a lo que nos ofrece esta librería Javascript.

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.

Nota: si deseas conocer estas y otras características de las CSS3 te recomendamos acceder al Manual de CSS3 de DesarrolloWeb.com.

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.

Autor

Miguel Angel Alvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Comenzó en el mundo del desarrollo web en el año 1997, transformando su hobby en su trabajo.

Compartir

Comentarios

franz1628

27/8/2011
Polyfills en Modernizr
En la parte de "Polyfills en Modernizr" en el último párrafo creo que debe decir "De ese modo" y dice "De es modo".

Gracias por este buen articulo.

frank_torres_rivera

01/9/2011
Excelente
Excelente, estaba precisamente pensando en usar modernizr, este manual llega como anillo al dedo. Muchas Gracias.

Jordi

10/1/2012
Elementos estructurales en HTML5, ojo al display:block!!
Hola amigos excelente artículo.

Aprovecho para adjuntar un enlace que complementa vuestra explicación. Se trata de lo específico de hacer compatibles los elementos estructurales de HTML5 en todos los navegadores. Es muy importante poner el display:block para que se pinten bien en IE. Lo digo para ahorrar a + de 1 algún dolor de cabeza. Allá va el post que explica cómo hacer esto. Gracias a todos y ánimo con el blog.

http://programarivm.com/2012/01/mi-primera-web-en-html5-elementos-estructurales-de-html5-compatibles-en-todos-los-navegadores-con-modernizr/

vanmido

25/1/2013
Correccion
Amigos de desarrollo web, observo que en sus manuales esta mal utilizado el termino librerías, en realidad son bibliotecas el termino a utilizar. Gracias por los manuales.

Gayumbzr

12/6/2013
ques esoooo
¿Eso que se ve de fondo son tus gayumboooos?? :)