Qué es Modernizr y cómo se usa?

Seguramente ya te has dado cuenta de que aquí intentamos hacer nuestro código lo más correctamente posible y luego cada navegador (Internet Explorer sobre todo) lo interpreta como le viene en gana. Horrible, no?

Uno de los modos de arreglar esto y conseguir que nuestra página web se vea más o menos igual en cualquier navegador es, crear una hoja de estilos para cada uno de ellos. También se podrían usar algunos trucos o hacks para conseguir lo mismo. Pero de una forma u otra, no dejan de ser chapuzas a las que no deberiamos llegar.

Modernizr entra entonces en escena para solventar todo esto. Es un archivo con una serie de instrucciones que logran detectar el navegador con el que está visualizando la página el usuario y que de algún modo, adaptan los estilos que la pagina usa para que ese navegador los interprete correctamente. Algo mágico, no?

Por hacerte una idea, imagina que en tu hoja de estilos añades algunas líneas para crear un sombreado a un título. Modernizr mira qué navegador y versión está usando el visitante y le envía los estilos de la hoja de estilos de forma que ese navegador y versión lo entienda tal y como pretendía el webmaster. El resultado es, que se consigue el mismo efecto de estilo sea cual sea la versión y marca del navegador utilizado.

Todas esas instrucciones se guardan en un archivo que suele llamarse modernizr.js (aunque lo puedes llamar como quieras) y se suele guardar en tu servidor, aunque también puede estar guardado en otro servidor. Por ejemplo, podriamos decirle a nuestras páginas que lean esas instrucciones en el archivo modernizr.js que guarda la página oficial www.modernizr.com, no? Haremos esto último por comodidad y para asegurarnos de disponer siempre de la última versión.

La línea que tenemos que añadir dentro de la cabecera de todas las páginas de nuestra web para conseguir este "truco", sería esta:

Fragmento de cabecera de todos los archivos .html
<script src="http://modernizr.com/downloads/modernizr.js"></script>

Puedes si quieres copiarte ese archivo y guardarlo en tu servidor. En ese caso tendrías que cambiar la ruta de la línea anterior y listo. Te puede interesar esa opción si en lugar de cargar por completo el archivo modernizr.js prefieres tener uno customizado, personalizado, es decir, con las intrucciones justas que vas a querer y no con todo lo que originalmente contiene. Pero eso ya es para sacar nota. Por el momento nos vale así, vale?