Modernizr es una librería javascript que nos permite enfocar el diseño de nuestras páginas web a las capacidades del navegador, en lugar de utilizar el antiguo enfoque que consistía en detectar en qué navegador estamos usando el userAgent.
Este enfoque tiene la ventaja de que está mucho mejor preparado ser compatible con las nuevas capacidades y mejoras que van teniendo los navegadores, de forma que nuestras páginas webs van a soportar de mucha mejor manera el paso del tiempo y van a ser funcionales siempre.
Cómo funciona
En su modo más básico, esta librería añade una serie de clases a la etiqueta HTML de nuestro documento donde se define, de forma explícita, qué soporta y qué no soporta el navegador. De esta forma, gran parte de la mejora progresiva podemos añadirlo en nuestra hoja de estilos.
Por ejemplo, esta es nuestra etiqueta HTML después de la carga de Modernizr
<html class="js flexbox canvas canvastext webgl no-touch geolocation postmessage websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients cssreflections csstransforms csstransforms3d csstransitions fontface generatedcontent video audio localstorage sessionstorage webworkers applicationcache svg inlinesvg smil svgclippaths">
Esto tiene varios usos, por ejemplo: Avisar al usuario que su navegador no soporta ciertas cosas
html.no-js .alert-box-no-javascript {
display: block;
}
Definir usos alternativos o comportamientos cada vez más avanzados
<style>
.menu-item:hover {
color: #333;
}
/* Apply opacity and fix color for readability */
.html.opacity .menu-item:hover {
opacity: 0.3;
color: red;
}
.html.csstransforms .menu-item:hover {
transform: scale(1.2);
}
</style>
Nota: Es interesante destacar que no siempre es necesario utilizar esta técnica para indicar el comportamiento, ya que los navegadores, cuando no sepan interpretar una regla, la suelen ignorar, es decir, que podríamos poner la regla de transform: scale(1.2); perfectamente en el hover
Carga condicional de dependencias
Con el uso de requirejs, podemos realizar la carga condicional de ciertas librerias, por ejemplo, podemos incluir librerías que funcionen como un polyfill de forma que otorge cierta funcionalidad para suplir las carencias del navegador, pero que no tengamos que penalizar a los usuarios que utilizan navegadores modernos
// Define our callback
var callback = function () {
console.log ('do stuff');
} ;
// Does our webbrowser supports Audio?
if ( ! Modernizr.audio) {
require ('[our-polyfill-to-use-audio-maybe-with-flash]', function () {
callback ();
});
} else {
callback ();
}
Detección avanzada de propiedades
Al margen de utilizar el tema de clases, tenemos disponible un objeto Modernizr que nos permitirá, en nuestro javascript realizar detecciones también y de forma más precisa.
Por ejemplo, de esta manera podemos detectar si nuestro navegador soporta el uso de la etiqueta video
if (Modernizr.video) {
console.log ('Our browser supports video');
}
Pero el que el navegador te diga que soporta vídeo, no quiere decir que sepa leer todos los distintos formatos de vídeo que hay, por lo tanto, podemos realizar comprobaciones de este estilo
if (Modernizr.video && Modernizr.video.h264) {
console.log ('Our browser supports video and MP4');
}
Aunque las librerías javascript se deban de incluir en el pie de página, por temas de velocidad de carga de la página y usabilidad del usuario, diferentes frameworks como HTML5 Boilerplate recomiedan que esta librería debe de incluirse en la etiqueta HEAD de forma que sepas reconocer de forma inmediata qué y qué no te permite usar el navegador
Comentarios