Cmo comenzar a usar Modernizr, las libreras para deteccin de funcionalidades en el navegador.

Por Miguel Angel Alvarez Modernizr es un paquete de libreras orientado para los desarrolladores que quieren crear sitios web con las tecnologas ms modernas, lase CSS3 y HTML5, pero que no quieren olvidarse de la compatibilidad con navegadores antiguos. En el anterior artculo realizamos una presentacin detallada de lo que nos ofrece Modernizr, por lo que ahora vamos a comenzar la explicacin sobre su uso. En este primer artculo vamos simplemente a ofrecer los primeros pasos que debemos realizar si queremos aprovechar las posibilidades de Modernizr en una pgina web que estemos realizando, es decir, cmo descargar las libreras y cmo incluirlas desde una pgina web.

Descarga de Modernizr
El primer paso consistir en descargar el archivo con el cdigo fuente de Modernizr. Se trata de un archivo con cdigo Javascript que podemos encontrar en dos variantes: 1) Desarrollo (Development) Es un script completo, con todas las funcionalidades bsicas de Modernizr, sin comprimir y con comentarios. Sera ideal usar este script nicamente durante la fase de desarrollo de nuestro proyecto. Luego interesara descargar un paquete idneo para produccin. 2) Produccin (Production) Cuando tengamos el sitio ya funcionando definitivamente y abierto a los visitantes, se recomienda hacer una descarga de las libreras para produccin. Para hacer esta descarga se ofrece una pgina donde podemos seleccionar las funcionalidades de deteccin que queremos incluir, porque estemos utilizando en nuestro proyecto. El peso de las libreras no es muy grande, pero siempre est bien que nos permitan optimizar nuestra descarga para incluir solo aquellos mdulos que vayamos a utilizar. Desde la propia pgina de descargas de Modernizr podremos encontrar la lista de funcionalidades completa y seleccionar las que queremos incluir en nuestro paquete. Tambin encontraremos un enlace para el acceso a la versin de desarrollo de las libreras.
Nota: Si no sabes qu funcionalidades vas a utilizar de Modernizr se recomienda utilizar la versin de desarrollo (ocupa solo 42Kb), pero luego, una vez terminado tu proyecto, se recomienda hacer un paquete

con las funcionalidades que realmente has utilizado. Ese paquete adems estar sin comentarios y comprimido, por lo que ocupar bastante menos que la versin para desarrollo.

Instalacin de Modernizr en la pgina

Una vez que hemos descargado nuestra librera, debemos incluirla en el cdigo HTML de la pgina, 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 pgina y adems se nos recomienda colocar esta llamada al script de Modernizr justo despus de nuestras declaraciones de estilos CSS.
Nota: Segn podemos leer en la documentacin de Modernizer, se aconseja colocar el script en en HEAD porque debe cargarse antes del BODY de la pgina, debido a un componente que quizs utilicemos, para permitir HTML en IE, llamado HTML5 Shiv. Adems, se recomienda colocar despus de los estilos CSS para evitar un comportamiento poco deseable llamado FOUC, por el cual puede mostrarse por un pequeo espacio de tiempo la pgina sin los estilos CSS.

A partir de este momento tendremos disponibles nuestros scripts de deteccin de funcionalidades as como una serie de clases CSS que nos ayudarn a aplicar estilos solo cuando los navegadores los soporten. Todo eso lo veremos ms adelante en siguientes artculos.

Navegadores compatibles
El listado de los navegadores compatibles con Modernizr es tan grande como podramos desear. En el momento de escribir este artculo estn soportando Internet Explorer 6+ (y superior), Firefox 3.5+, Opera 9.6+, Safari 2+ y Google Chrome. Adems, para sistemas operativos de dispositivos mviles soportan Safari para iOS, el navegador de Android basado en Webkit, Opera Mobile y Firefox Mobile. Avisan en la documentacin adems que estn trabajando para soportar Blackberry 6+ dentro de poco. De momento dejamos este artculo por aqu, pues en el siguiente ya entraremos en materia para mostrar cmo detectar funcionalidades en el navegador por medio de Javascript y Modernizr.