Moderniza tu pagina web
Modernizr es una librería JavaScript que nos permite conocer la compatibilidad del
navegador con tecnologías HTML5 y CSS3, lo que nos permitirá desarrollar sitios web
que se adapten a las capacidades cada navegador.
Este framework es un paquete de detección de las capacidades de un navegador relativas
a HTML5 y CSS3, esto es, una librería JavaScript que nos informará cuáles de las
funcionalidades de estas tecnologías están disponibles en el navegador del usuario, para
utilizarlas, o no, en cada caso Moderniza tu pagina web.
Sabiendo que nuestro navegador soporta ciertas capacidades de CSS3 o de HTML5,
podremos utilizarlas con libertad. De modo contrario, si sabemos que un navegador no
es compatible con determinada funcionalidad, podremos implementar variantes que sí
soporte y así crear sitios web que se adaptan perfectamente al cliente web de cada
visitante.
Existen dos herramientas principales en Modernizr que se pueden utilizar para detectar
las funcionalidades que están presentes en un navegador. Una la podemos utilizar a
través de JavaScript y otra directamente sobre código CSS. En resumen, con Modernizr
podemos detectar las funcionalidades disponibles de CSS3 y HTML5.
4.1 AÑADIR MODERNIZR A UNA PÁGINA
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:
Development: contiene el código fuente completo, sin comprimir y con
comentarios. Debemos utilizar esta variante únicamente en desarrollo o cuando
queremos acceder a su código, para comprenderlo o ampliarlo.
Production: es recomendable (o más bien obligatorio) utilizar esta variante cuando
pasamos a un entornos de producción. Al descargarnos Modernizr, tenemos la
posibilidad de generar una librería únicamente con las funcionalidades que
queremos detectar, lo que nos permitirá ahorrarnos una importante cantidad de KB
innecesarios diseño.
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.
<script src=”/js/lib/vendor/modernizr-custom.min.js”></script>
Según podemos leer en la documentación de Modernizr, se aconseja colocar el
script dentro del HEAD, porque debe cargarse antes del BODY de la página, debido
a un componente que quizás utilicemos, para permitir HTML5 en Internet Explorer,
llamado HTML5 Shiv. Además, se recomienda colocarlo después de los estilos CSS
para evitar un comportamiento poco deseable llamado FOUC, por el cual puede
mostrarse, por un pequeño espacio de tiempo, la página sin los estilos CSS
aplicados diseño web.
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 Moderniza tu pagina web.