Modernizr es un paquete de librerías orientado para los desarrolladores que quieren crear sitios web con las tecnologías más modernas, léase CSS3 y HTML5, pero que no quieren olvidarse de la compatibilidad con navegadores antiguos. En el anterior artículo realizamos una presentación detallada de lo que nos ofrece Modernizr, por lo que ahora vamos a comenzar la explicación sobre su uso.

En este primer artículo vamos simplemente a ofrecer los primeros pasos que debemos realizar si queremos aprovechar las posibilidades de Modernizr en una página web que estemos realizando, es decir, cómo descargar las librerías y cómo incluirlas desde una página web.

Descarga de Modernizr

El primer paso consistirá en descargar el archivo con el código fuente de Modernizr. Se trata de un archivo con código Javascript que podemos encontrar en dos variantes:

1) Desarrollo (Development)
Es un script completo, con todas las funcionalidades básicas de Modernizr, sin comprimir y con comentarios. Sería ideal usar este script únicamente durante la fase de desarrollo de nuestro proyecto. Luego interesaría descargar un paquete idóneo para producción.

2) Producción (Production)
Cuando tengamos el sitio ya funcionando definitivamente y abierto a los visitantes, se recomienda hacer una descarga de las librerías para producción. Para hacer esta descarga se ofrece una página donde podemos seleccionar las funcionalidades de detección que queremos incluir, porque estemos utilizando en nuestro proyecto. El peso de las librerías no es muy grande, pero siempre está bien que nos permitan optimizar nuestra descarga para incluir solo aquellos módulos que vayamos a utilizar.

Desde la propia página de descargas de Modernizr podremos encontrar la lista de funcionalidades completa y seleccionar las que queremos incluir en nuestro paquete. También encontraremos un enlace para el acceso a la versión de desarrollo de las librerías.

Instalación de Modernizr en la página

Una vez que hemos descargado nuestra librería, debemos incluirla en el código HTML de la página, de la misma manera que incluimos scripts Javascript de toda la vida.

<script src="modernizr-latest.js"></script>

Esto lo haremos en el HEAD de la página y además se nos recomienda colocar esta llamada al script de Modernizr justo después de nuestras declaraciones de estilos CSS.

A partir de este momento tendremos disponibles nuestros scripts de detección de funcionalidades así como una serie de clases CSS que nos ayudarán a aplicar estilos solo cuando los navegadores los soporten. Todo eso lo veremos más adelante en siguientes artículos.

Navegadores compatibles

El listado de los navegadores compatibles con Modernizr es tan grande como podríamos desear. En el momento de escribir este artículo están soportando Internet Explorer 6+ (y superior), Firefox 3.5+, Opera 9.6+, Safari 2+ y Google Chrome. Además, para sistemas operativos de dispositivos móviles soportan Safari para iOS, el navegador de Android basado en Webkit, Opera Mobile y Firefox Mobile. Avisan en la documentación además que están trabajando para soportar Blackberry 6+ dentro de poco.

De momento dejamos este artículo por aquí, pues en el siguiente ya entraremos en materia para mostrar cómo detectar funcionalidades en el navegador por medio de Javascript y Modernizr.