MODERNIZR

Modernizr es una librería JS que se encarga de preguntar al navegador si soporta cualquier funcionalidad que queramos utilizar. Si lo hace, escribimos nuestro código, y si no, ofrecemos alguna alternativa, consiguiendo de esta forma Cross Browser y Progressive Enhancement.

Para usarlo hay que descargar Modernizr en su página oficial y cargar el archivo JS. A continuación, llamamos al método load, que recibe como parámetros opcionales un objeto o un array de objetos, correspondiente a una funcionalidad.

Para aclararnos un poco vamos a proponer un ejemplo en el que vamos a preguntar si el navegador soporta Geolocalización.

Modernizr.load({ test: Modernizr.geolocation, yep : 'geo.js', nope: 'geo-polyfill.js' });

Como vemos, le pasamos como parámetro un objeto con tres propiedades:

test > Es la funcionalidad por la que preguntamos (en nuestro caso geolocalizaión).
yep > Aquí llamamos a un JS en caso de que SÍ sea soportado por el navegador.
nope > Aquí escribimos un JS en caso de NO ser soportado por el navegador (normalmente solemos llamar a un Pollyfill).

Una utilidad muy interesante para los desarrolladores web es el uso de media queries a través de Modernizr como alternativa al uso en CSS.

Para preguntar por ejemplo si el tamaño en el que estamos es menor de 768px se haría de la siguiente manera:

if (Modernizr.mq('only screen and (max-width: 768px)'){ ... }

Por último, comentaros que se puede personalizar la descarga modernizr para quitar las funcionalidades que no utilicemos.