Antes de empezar, primero les diré que personalmente considero que el uso completo de modernizr no es necesario en la mayoría de proyectos, por lo general bastará con utilizar html5shiv, antes que quieran matarme por decir eso les explicaré un poco como funciona y luego les explico porque pienso eso.
¿Qué es Modernizr?
Es una librería javascript que permite comprobar si los navegadores soportan determinadas características de CSS3 y HTML5, además (y esto es lo más importante) permite que los navegadores antiguos reconozcan las nuevas etiquetas HTML5. Pues hasta ahí suena muy bien sin embargo eso no es del todo automático, así que veamos ahora como funciona.
¿Cómo empezar?
Pues lo primero es descargar el script desde AQUI como verás te permite bajar una versión personalizada que sólo soporte lo que requieres, esto es importantísimo para bajarle de peso a la librería y no gastar Kb en vano, como imagino que ya sabes lo básico de HTML y CSS, debes saber como incluir en el el proyecto el script.
¿Y cómo funciona?
Con incluirlo los navegadores antiguos (llámese Internet Explorer) pasarán a reconocer etiquetas como por ejemplo los muy utilizados DIV pero el verdadero poder de modernizr se nota cuando lo utilizamos para detectar el soporte de determinadas características, al incluirlo Modernizr añade una clase a la etiqueta HTML por cada propiedad que es soportada quedando algo así como esto:
1 | <html class=" js flexbox canvas canvastext webgl touch geolocation postmessage no-websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow"> |
Y seguro te preguntarás para que sirve eso, pues permite fijar códigos CSS específicos para navegadores que soportan una propiedad o no, así para darle box-shadow lo haríamos de la siguiente forma
1 | .boxshadow #caja{ box-shadow:1px 1px 2px #000; } |
Ese código aplicaría la propiedad box-shadow únicamente para los navegadores que soporten dicha propiedad, eso significa en otras palabras que si de verdad queremos utilizar modernizr deberíamos cambiar la forma en que escribimos CSS y deberiamos fijarnos en esas propiedades, eso la verdad casi nadie lo hace salvo contados proyectos que de verdad lo ameritan por eso decía al inicio en la gran mayoría de casos con el HTML5shiv alcanzam basta y sobra.
Modernizr y Javascript
Esta parte me gusta más de modernizr permite incluir determinados javascript según lo soporte o no el navegador. Muchas veces resulta que queremos utilizar canvas o local storage y cuando nos encontramos con un navegador que no lo soporta usamos código javascipt y css para suplirlo, sin embargo cargarlo siempre no tiene sentido sería mejor si sólo se cargara cuando se requiera y en eso nos da una mano Modernizr como el siguiente ejemplo:
1 2 3 4 5 | Modernizr.load({ test: Modernizr.localstorage, yep : 'hay_soporte_nativo.js', nope: ['storage-polyfill.js', 'estilos-polyfill.css'] }); |
Espero que este pequeño tutorial te resulte util, no olvides dejar tus comentarios o compartir algún script interesante a mi Twitter @xlogus