20/02/2017Artículo original
Modernizr es una librería de JavaScript creada para simplificar el soporte en diferentes navegadores para las características más modernas de HTML5 y CSS3.
Modernizr se ejecuta muy rápido, en el momento de cargar la página, y desde nuestro código JavaScript podemos consultarle si el navegador actual soporta o no una determinada característica.
Se basa en detectar directamente si la característica funciona dentro del navegador. Esto contrasta con la forma de operar de otras tecnologías, que se basan en la cabecera user-agent transmitida por el navegador para buscar en una tabla las características conocidas de dicho navegador. La detección se considera más fiable que las tablas, porque éstas podrían no siempre estar al día o no contener información suficientemente actualizada sobre cada uno de los posibles navegadores.
Modernizr se ejecuta automáticamente, solo con incluir la librería dentro de la página HTML. No es necesario llamar a ninguna función de inicialización. A continuación, realiza pruebas muy rápidas para la detección de un gran número de características del navegador, y expone los resultados en forma de propiedades booleanas (con algunas excepciones) de un objeto JavaScript, que se llama precisamente Modernizr.
A través del objeto Modernizr nuestro código en JavaScript puede tomar decisiones en función de la disponibilidad de determinadas características del navegador. Adicionalmente, Modernizr también añade clases al HTML con los nombres de las características NO soportadas, lo que permite que nuestros estilos CSS puedan variar en función de la presencia de esas clases.
Para realizar la mayoría de las pruebas de detección, lo que hace Modernizr es crear un elemento de prueba dentro del HTML, configurar determinadas propiedades sobre ese elemento, y después intentar volver a leer esas propiedades. Si el navegador entiende las propiedades en cuestión, devuelve un valor razonable, y en caso contrario devuelve null o undefined. Basándose en dicho resultado, Modernizr determina la disponibilidad de esa característica del navegador.
Uso de Modernizr en una página web
Para utilizar Modernizr en una página, es necesario añadir una referencia a la librería, de forma análoga a la que se muestra en el siguiente fragmento:
<html> <head> <script type="text/javascript" src="modernizr-latest.js"></script> ... </head> <body> ... </body></html>
Por supuesto, el parámetro src debe apuntar a la ruta y nombre de archivo real en el que se encuentre la librería que previamente habremos descargado.
Desde la página de descargas de Modernizr, una vez que sepamos qué funcionalidades vamos a usar y por lo tanto necesitamos detectar, nos permite construir una versión personalizada que contenga tan solo las funciones deseadas, con lo que minimizaremos el tamaño del archivo que necesitarán descargar los visitantes de nuestra web.
[youtube:JcNOBPc20Dw]Si no deseamos instalar la librería en nuestro propio servidor web, otra posibilidad es enlazar directamente con la versión del archivo que ofrecen distintas Redes de Distribución de Contenido (CDN). Por ejemplo, este sería el código necesario para cargar la librería desde CDNJS:
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script>
Pero suelen estar mucho más desactualizados que si descargamos la última versión desde la página oficial y la albergamos.
Funcionalidad
Modernizr añade a nuestra página:
- Detección del soporte que el navegador actual ofrece para ciertas características de CSS3 como border-radius, border-image, box-shadow, @font-face, rgba(), etc…
- Detección de las nuevas características de HTML5 como <audio>, <video> y localStorage, así como los nuevos tipos y atributos del elemento <input>.
- Si el navegador es Internet Explorer 8 o anterior (desde el 6), añade soporte para los nuevos elementos semánticos de HTML5. Esto no significa que vayamos a ser capaces de usar (por ejemplo) <audio> o <video> en un navegador antiguo, sino que podemos usar elementos tales como <section> o <footer> en lugar de <div> y hacer que funcionen correctamente los estilos CSS sobre estos elementos.
- Detección de características para aplicar estilos CSS3
Típicamente nuestro primer paso consistirá en modificar la etiqueta para añadirle la clase no-js:
<html class="no-js">
Al ejecutarse Modernizr, si el navegador soporta JavaScript, se reemplazará “no-js” por “js”, y de esta manera podremos aplicar diferentes estilos sobre cada una de esas dos clases para hacer que determinadas partes de la pantalla se vean distintas dependiendo de que se soporte o no se soporte JavaScript.
Pero es más, Modernizr no sólo cambia no-js por js sino que además incluye en la lista de clases los nombres de cada una de las características que ha conseguido detectar. De esta manera, la etiqueta en tiempo de ejecución presentará un aspecto similar a este:
<html class="js canvas canvastext no-geolocation rgba hsla multiplebgs borderimage borderradius boxshadow opacity cssanimations csscolumns cssgradients cssreflections csstransforms csstransforms3d csstransitions video audio localstorage sessionstorage webworkers applicationcache fontface">
Las características soportadas simplemente se indican por su nombre, mientras que las no soportadas llevan el prefijo no-.
Para usarlas en un estilo, se introducen las correspondientes clases en el
