Que es Modernizr

 

Modernizr es una librería de JavaScript que forma parte de gran número de sitios web en la actualidad, la principal característica que lo hace una herramienta de gran utilidad es la capacidad de detectar tecnologías desde el navegador del usuario, por ejemplo, HTML 5 Y CSS3.

 

 

Con la aparición y el avance de diversas tecnologías, tenemos la posibilidad de crear nuevos elementos, más llamativos, detallados y con excelentes diseños y los usuarios en ocasiones no van a la par de esta tecnología y es donde esta va superando a los navegadores, lo que ocasiona que nuestro sitio se vea inadecuadamente y puede ser una experiencia desagradable para el usuario.

 

Es por eso que existe esta herramienta, ya que nos permite comprobar si el navegador del usuario cuenta con ciertas funciones o características, y si no es así, queda por nuestra parte está ejecutar un script específico para navegadores anteriores y tratar de emular lo que si pueden interpretar los navegadores actuales.

 

Las versiones de estas herramientas se encuentran disponibles desde su página:

 

https://modernizr.com/

 

 

Donde encontraremos 2 versiones, la de desarrollo y la de producción, donde la diferencia, es que la de desarrollo cuenta con todas las pruebas que se realizaron, es decir, es una versión sin comprimir y la versión de producción es la versión compacta de las características de esta herramienta.

A continuación se muestra un ejemplo de cómo incluir las funcionalidades de esta herramienta:

 

<script src=”modernizr.js” type=”text/javascript”></script>

 

Posteriormente agregamos la siguiente línea:

 

<html class=”no-js”>

 

Esto es necesario ya que con esto podemos detectar si un usuario tiene deshabilitado el JavaScript, en caso de estar todo correcto Modernizr reemplazará esta clase por la clase js.

 

Con esto ya tenemos configurado nuestro ambiente para poder contar con las ventajas que Modernizr le ofrece a nuestro sitio web, si inspeccionamos el código que interpreta el navegador, podemos observar que se han añadido muchas clases a la etiqueta HTML, esto lo hace la herramienta y depende de las características que tenga el navegador de los usuarios, es decir, entre más reciente sea el navegador, menor cantidad de clases va a tener porque cuenta con las ultimas funcionalidades.

 

En el caso contrario se agregaran varias debido a que no será compatible con la mayoría de las funcionalidades.

 

Modernizr también nos ofrece una funcionalidad con la cual podemos comprobar la compatibilidad de nuestro navegador, esto se realiza de la siguiente manera:

 

If (!Modernizr.borderradius) {

    alert(‘El navegador no cuenta con dicha característica’);

};

 

Como podemos ver es una herramienta de gran utilidad, en este caso disparamos un aviso de que no es compatible, pero esto puede ser cambiado por una funcionalidad que sustituya borderradius.

Share: