Modernizr: Detectando el soporte de HTML5

Muchas veces cuando nos enteramos de las nuevas funcionalidades que aparecieron en HTML5 nos lanzamos de lleno a usarlas y esto no nos representa un problema para nada ya que como sabemos nos ahorra muchos dolores de cabeza y la cantidad de código que escribimos es menor.

Ahora bien que pasa con los navegadores mas viejos que no soportan estas nuevas funcionalidades, no podemos simplemente dejar excluidos a esos usuarios solo por no contar con un navegador moderno pero como hacemos para detectar si el navegador soporta o no determinada funcionalidad y en base a eso tomar una decisión.

Para resolver este problema contamos con Modernizr que nos ayudara a detectar que funcionalidades están disponibles.

¿Que es?

Modernizr es una librería open-source de JavaScript que nos permite detectar cuales de las funcionalidades de HTML5  y CSS3 se encuentran disponibles en el navegador que estamos usando, esto es especialmente útil para las viejas versiones de los navegadores que no disponen de estas funcionalidades.

Algo que cabe mencionar es que Modernizr no es una solución ante la falta de esas funcionalidades, simplemente nos permite detectar cuales no funcionan en un navegador para poder solucionar este problema existen los llamados Polyfills que son los encargados de proveer la misma funcionalidad que existe en HTML5 y CSS3 para los navegadores que no poseen el soporte.

¿Que funcionalidades puedo comprobar?

En las distintas versiones de esta librería se han ido incorporando nuevas funcionalidades que se pueden comprobar, al momento se cubren mas de 40 entre funcionalidades de CSS3 y HTML5. En este post mencionaremos las mas importantes pero el listado completo de las mismas lo pueden comprobar en este link.

Esta es la lista acotada de funcionalidades cubiertas en HTML5:

HTML5 Atributo en Modernizr 
Application cache applicationcache
Audio audio.type (ogg, mp3, wav, m4a)
Canvas canvas
Drag and drop draganddrop
Form input attributes input.attributeName
Form input elements inputtypes.elementName
Geolocation geolocation
Local storage localstorage
Session storage sessionstorage
Video video.type (ogg, webm, h264)
Web sockets websockets
Web workers webworkers

Esta es la lista acotada de funcionalidades cubiertas en CSS3:

CSS3 Atributo en Modernizr 
@font-face fontface
background-size backgroundsize
border-image borderimage
border-radius borderradius
box-shadow boxshadow
gradients cssgradients
opacity  opacity
 text-shadow  textshadow

¿De donde lo descargo?

Existen varias formas de poder descargar la librería para poder ser utilizada, para ello veamos las 3 mas comunes:

  • Manualmente desde este link (podemos descargarnos una versión custom con solo las funcionalidades que pensamos comprobar.)
  • Bower (que para quienes no lo conozcan es un gestor de dependencias, que nos ayuda a bajar de forma automática los frameworks o librerías relacionadas con JavasScript)

  • Npm (es un manager de paquetes de JavaScript al igual que Bower, solo que este es el que usa por default Node.js)

Si se opta por alguna de las dos ultimas opciones y ya se cuenta con los correspondientes archivos de dependencias, se debe agregar a los comandos que se mencionaron el –save para que la librería no se descargue solo en nuestra maquina sino que se descargue en la del resto de los desarrolladores cuando ejecuten el comando bower install o npm install.

Una vez hecho esto solo nos queda incluirla dentro de nuestro HTML para que la misma sea cargada, teniendo en cuenta las siguientes salvedades:

  • Colocarlo dentro del HEAD
  • Colocarlo después de los estilos

¿Como la uso?

Ya con la librería añadida en nuestra pagina cada vez que se ingrese a la misma se creara un objeto JavaScript llamado Modernizr el cual cuenta con una serie de propiedades cada una de las cuales detecta una funcionalidad de HTML5. Gracias a este nuevo objeto podremos hacer las validaciones correspondientes y en caso de no tener disponible cierta funcionalidad ver la forma de cubrirla.

El siguiente es un ejemplo de como comprobar si tenemos disponible el localstorage:

Modernizr nos provee de una manera sencilla de cargar solo las librerías que los usuarios necesitan, o sea solo cargar la porción de código que funcionara en ese navegador en lugar de cargar ambas y que el mismo use solo una parte. Esto ultimo es ideal para reducir la cantidad de datos que se transfieren a cada persona que ingresa a nuestra pagina pero a la vez requiere que nosotros tengamos separado el codigo de forma correcta.

Veamos ahora como quedaría el ejemplo anterior usando esta nueva funcionalidad:

Conclusión

Hemos visto a lo largo de este post la gran ventaja que nos ofrece Modernizr a la hora de poder detectar que funcionalidades están disponibles y cuales no, lo cual nos ayuda a tomar un curso de acción en caso de no tenerlas. Hay que tener en cuenta que muchas veces no es de nuestro interés que personas con navegadores que no soporten  HTML5 usen nuestra pagina por lo cual en ese caso se podría detectar el navegador y en base a eso mostrar o no un aviso.

You may also like...

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos necesarios están marcados *