Modernizr. Una herramienta imprescindible

Modernizr. Una herramienta imprescindible

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

 

Referencias

Comentarios

Sin comentarios
Ha habido un error en el envío
Comentario enviado. Será revisado por la moderación antes de ser publicado.

Deja tu comentario

Tu nombre:
Tu email:
Tu comentario:
Nuestra página web utiliza cookies propias y de terceros, para realizar el análisis de la navegación de los usuarios y así poder mejorar nuestros servicios. Si continúas navegando, consideramos que aceptas su uso. Puedes cambiar la configuración u obtener más información aquí