ATENCIÓN: este contenido tiene más de 2 años de antigüedad y, debido a su temática, podría contener información desactualizada o inexacta en la actualidad.
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.
Nótese que Modernizr no añade a nuestra página esa funcionalidad que ha detectado como "no disponible"; simplemente nos informa de su ausencia para que nuestro código pueda tomar las decisiones oportunas. En muchos casos, esta funcionalidad puede suplirse mediante librerías adicionales conocidas como Polyfils, que trataremos más adelante en otros artículos.
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.
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 <html> 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 <html> 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 <style> (con un punto, que es el prefijo que indica "clase" en CSS):
.rgba div {
/* Escribir aquí los estilos de los DIVs cuando el navegador soporta rgba() */
}
.no-rgba div {
/* Escribir aquí los estilos de los DIVs cuando el navegador no soporta rgba() */
}
Detección de características para usar en scripts
Como ya dijimos antes, Modernizr crea un objeto de JavaScript, que también se llama Modernizr, que tiene una lista de propiedades que devuelven un valor booleano por cada característica detectada.
Por ejemplo, Modernizr.canvas devuelve true si el navegador soporta <canvas> y false si no lo soporta.
Algunas características anidan detalles adicionales, por ejemplo, Modernizr.video.h264 devuelve true si el navegador soporta el códec H264. Otras son más sofisticadas y devuelven distintas cadenas en lugar de simplemente true o false. Por ejemplo, Modernizr.audio.ogg puede devolver una cadena vacía (no se soporta el formato OGG), o 'maybe' (puede que se soporte) o 'probably' (probablemente se soporta).
Para usar los valores en un script, simplemente se usa el valor devuelto, típicamente en un if:
if (Modernizr.rgba) {
// Hacer las operaciones oportunas para los navegadores que soportan rgba()
} else {
// Hacer las operaciones oportunas para los navegadores que no soportan rgba()
}
Uso con estilos CSS
Una de las ventajas de los estilos CSS es que se pueden añadir propiedades adicionales a una regla, y si el navegador no soporta esas propiedades, simplemente las desprecia. Por ejemplo, para crear un borde con las esquinas redondeadas, se puede añadir en el estilo la propiedad border-radius, y si el navegador no lo soporta la página seguirá funcionando, aunque el borde presentará las esquinas puntiagudas. Para esto no necesitaríamos Modernizr.
Pero lo que no se puede hacer sin Modernizr es cambiar una propiedad que el navegador sí que soporta, dependiendo de que exista soporte para otra propiedad.
Por ejemplo, consideremos el siguiente fragmento de código:
<head>
[...]
<style type="text/css">
#content {
background: yellow;
border: 3px outset red;
padding: 20px;
}
.borderradius #content {
border: 1px solid green;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
</style>
</head>
<body class="no-js">
[...]
<div id="content">
[...]
</div>
[...]
</body>
El cuerpo de la página contiene un <div> al que queremos aplicarle un reborde con las esquinas redondeadas. Podríamos simplemente añadir en el estilo la propiedad border-radius, y se despreciaría en caso de que el navegador no la soportase. Pero lo que no conseguiríamos de esa manera es cambiar el color o el grosor del borde en aquellos casos en los que no se pueda redondear. En cambio, con Modernizr podemos añadir un segundo estilo basado en la clase borderradius que Modernizr añadió al <html> y por tanto fue heredado por el <div>. En ese segundo estilo, cambiamos las propiedades del borde del <div>:
En el siguiente vídeo se muestra cómo sacarle partido a estas cuestiones básicas de Modernizr.
Nota: en este vídeo usamos un navegador antiguo como es Internet Explorer 9 porque ofrece soporte para algunas caracteíristicas de HTML5 y CSS3 y al mismo tiempo nos permite cambiar rápidamente a versiones más antiguas del navegador, con lo cual es muy fácil ver Modernizr en acción.
Fecha de publicación: