Modernizr: añadiendo soporte de características modernas a navegadores antiguos (Parte 1)
Menú de navegaciónMenú
Categorías

La mejor forma de Aprender Programación online y en español www.campusmvp.es

Modernizr: añadiendo soporte de características modernas a navegadores antiguos (Parte 1)

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>:

Efecto de usar Modernizer para bordes redondeados en navegadores antiguos que no lo soportan

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.

Alberto Población Alberto es MVP de C#, y lleva varias décadas desarrollando software. Cuenta entre otras con las certificaciones MCSE, MCDBA, MCITP, MCSD, MCPD. En la actualidad trabaja como consultor independiente dedicándose también a la formación. Es instructor certificado por Microsoft. Ver todos los posts de Alberto Población

No te pierdas ningún post

Únete gratis a nuestro canal en Telegram y te avisaremos en el momento en el que publiquemos uno nuevo.

Archivado en: Desarrollo Web | Herramientas

Agregar comentario