Introducción a Modernizr

Un tutorial introductorio a la librería Modernizr, que sirve para compatibilizar HTML5 y CSS3 con navegadores antiguos.

gaughin

archivado en: JavaScript / 12 diciembre, 2012

Modernizr es una librería que permite trabajar con HTML5 y CSS3 de forma compatible con los navegadores más antiguos. En esencia, lo que hace es detectar si un navegador soporta determinada característica para que o bien ofrezcamos alternativas o bien hagamos algún apaño para tratar de emularla, que es lo que se conoce como usar un pollyfill.

Ahora bien, antes que nada conviene aclarar que la expresión «un navegador» significa en realidad el Explorer, que hasta la versión 10, creo, no se actualiza de forma automática y que de la 8 para abajo no es capaz de interpretar casi ni las CSS2, tal y como podemos explican en detalle en caniuse.com. Por lo tanto, la pregunta es si compensa realizar algún esfuerzo para que nuestra página web se vea perfectamente en los diploexplorerocus.

Según w3schools.com,  para octubre de 2012, todavía el 16,1 por ciento de los internautas siguen usando el Explorer, que por versiones se distribuye de la siguiente manera:

  • IE10:  0.2% <- funcionan las cosas
  • IE9: 6.8% <- funcionan muchas cosas.
  • IE8: 7.6% <- no funciona casi nada.
  • IE7: 1.2% <- no funciona nada.
  • IE6: 0.3% <- no funciona nada en absoluto. (Muerto oficialmente, DEP).

A esto habría que añadir aproximadamente un 0.5% de internautas que usan el opera mini para móviles, que es otra tostadora. Es decir, en total, en torno al 9,6 por ciento de los internautas no verán bien una página con HTML5 y CSS3 y es una cifra decreciente. ¿Vale la pena preocuparse?

No creo que exista una respuesta universal, sino que dependerá de cada caso. Si es una página para la administración debe ser lo más accesible posible, pero si es para la empresa privada dependerá del presupuesto, del target y de la importancia del elemento de HTML5 en el conjunto de la página. Por ejemplo, carece de importancia que un usuario no pueda ver los elementos gráficos, como las sombras o los bordes redondeados que permiten las CSS3; pero si no se reproduce un vídeo o si la página se descabala entera porque el navegador no entiende las etiquetas semánticas, ya es más grave.

Esta última idea forma parte de lo que se conoce como mejora progresiva, «progressive enhancement» en inglés, que consiste en realizar una web perfectamente funcional para cualquier dispositivo y luego ir añadiendo mejoras en los dispositivos que lo permiten.

Aclarado esto, vamos ya con Modernizr.  🙂

Modernizr y CSS3

La manera más sencilla de trabajar con Modernizr es incorporando hojas de estilo mejoradas para los navegadores que lo permiten. El proceso es detectar si el navegador cliente es capaz de interpretar determinada característica y, en ese caso, añadir el estilo correspondiente. Esto se entiende bien con un ejemplo. Vamos a utilizar la detección de border-radius, los bordes redondeados.

1) Preparar la librería

Lo primero es descargarse los componentes de la librería que necesitamos, así que vamos a la web de Modernizer y seleccionamos la opción production. En la siguiente página marcamos lo que vamos a usar, en este caso, la detección de border-radius.

[singlepic id=43 w=350 h=319 float=center]

Luego pulsamos el botón generate y a continuación download. Le cambiamos el nombre del archivo, que será algo del tipo modernizr.custom.13544, por modernizr.js y lo guardamos donde queramos (en el raíz o en un subdirectorio).

 2) Clases dinámicas

Para entender cómo funciona Modernizr podemos hacer un documento muy sencillo, con un párrafo que tenga un borde, en el cual incluimos el archivo que nos hemos bajado como cualquier otro JavaScript.

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>
  6. modernizr
  7. </title>
  8. <script src="modernizr.js"></script>
  9. <style type="text/css">
  10. .parrafo_con_bordes {
  11. border:1px solid #900;
  12. }
  13. </style>
  14. </head>
  15. <body>
  16. <p class="parrafo_con_bordes">Soy un párrafo con bordes normales o redondeados según el caso</p>
  17. </body>
  18. </html>

Ahora, cuando el navegador soporta los bordes redondeados, de forma dinámica, Modernizr añade en la etiqueta <html> la clase borderradius:

  • <html class=" js borderradius">

Por el contrario, cuando no es capaz de interpretar este estilo, en la etiqueta HTML escribe no-borderradius.

  • <html class="js no-borderradius">

Podemos comprobar esto en el Chrome abriendo las herramientas para desarrolladores (F12):

[singlepic id=44 w=350 h=252 float=center]

El explorer 9 también cuenta con una consola similar, Herramientas > herramientas de desarrollo, que también se abre con F12, al igual que ocurre con el Firefox. Pero, además, en Modo de documento, podemos escoger qué versión debe renderizar la página. En este ejemplo, escogí la 7.

[singlepic id=45 w=350 h=274 float=center]

3) Añadir estilos por contexto

Antes de seguir, recordemos que los estilos se pueden manejar por contexto. Por ejemplo, si queremos que el texto de este párrafo sea de color rojo:

  • <div class="contextos_rojos">
  • <p> Soy un párrafo rojo. </p>
  • </div>

En el estilo podemos utilizar su contenedor indicándolo con la etiqueta a contextualizar después de la clase (o el id):

  • .contextos_rojos p{
  • color: #900;
  • }

Entonces, como modernizr ha creado dinámicamente en el nodo padre de todos los nodos, el contexto de todos los contextos, la clase .borderradius solo en el caso de que el navegador sea capaz de interpretar esta propiedad, podríamos añadir este selector que redondee los bordes cuando exista este contexto:

  •  .borderradius .parrafo_con_bordes {
  • border-radius: 10px;
  • }

Y viceversa. Por ejemplo, en el caso de que no admita la propiedad, podemos hacer el borde más sutil bajándole el color o hacerlo punteado o incluso quitarlo sobrescribiendo la propiedad border.

  •  .no-borderradius .parrafo_con_bordes {
  • border: 1px solid #ccc;
  • }

o

  •  .no-borderradius .parrafo_con_bordes {
  • border: 0;
  • }

Es un truco muy ingenioso, pero no conviene abusar para nimiedades como bordes o sombras, ya que cada componente de modernizr ralentiza la web.

Los polyfill

Donde Modernizr alcanza su verdadero potencial es cuando se combina con los llamados polyfills, que son apaños en JavaScript que emulan o palían la falta de capacidad de interpretar algo por parte de los navegadores.

Cada problema necesita su propio polyfill y en algunos casos ni siquiera es recomendable usarlo, sino recurrir a otros trucos, como los CSS alternativos que veíamos antes. En Mejorandola recomiendan  html5please.com para saber cuál es la mejor solución en cada caso y en la propia documentación de  Modernizr hay mucho material para consultar.

Para entenderlos, vamos a ver un pollyfill para hacer bordes redondeados, un ejemplo totalmente desasconsejable en la vida real, ya que por esa nimiedad gráfica no vale la pena cargar la página de scripts. En otras entradas ya veremos casos más serios, como el vídeo en HTML5.

Entonces, así tendríamos un párrafo con el fondo redondeado que se vería muy chulo en casi todos los navegadores:

  • ...
  • <style type="text/css">
  • .parrafo_con_bordes {
  • background-color: #900;
  • color:#fff;
  • padding: 1em;
  • width: 200px;
  • }
  • .redondeados {
  • border-radius: 10px;
  • }
  • </style>
  • ...
  • <p class ="parrafo_con_bordes  redondeados">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
  • ...

Que se verá así en los navegadores normales:

[singlepic id=46 w=249 h=225 float=center]

Para que se vea igual de chulo en los diploexplorerocus podemos usar un plugin de jQuery programado por Dave Methvin llamado jquery.corner.

Lo primero es detectar con JavaScript si el navegador puede con el estilo, para lo cual basta con escribir el nombre de la propiedad que queremos detectar después de la palabra Modernizr. en una estructura condicional. Si el navegador no es capaz de implementarlo, cargamos con getScript() el script jquery.corner.

  • <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js">
  • <script type="text/javascript">
  • if (!Modernizr.borderradius) {
  • $.getScript("jquery.corner.js", function () {
  • $(".redondeados").corner("20px");
  • });
  • }
  • </script>

Pero aún hay una manera más eficiente de hacerlo mediante  el método Modernizr.load(), que se puede descargar con los extras de la librería. Su sintaxis básica es:

  • Modernizr.load({
  • test: lo que estamos testando,
  • yep : 'lo que pasa cuando funciona (opcional)',
  • nope: 'lo que pasa cuando no funciona (opcional)'
  • });

En nuestro caso:

  • Modernizr.load({
  • test: Modernizr.borderradius,
  • nope: 'jquery.corner.js',
  • callback: function () {
  • $('.redondeados').corner("20px");
  • }
  • });

Bueno, de momento vamos a dejarlo aquí...

(ver código de los ejemplos en github)

abrazos++;

|| Tags: , , ,

valoración de los lectores sobre Introducción a Modernizr

  • estrellica valoración positiva
  • estrellica valoración positiva
  • estrellica valoración positiva
  • estrellica valoración positiva
  • estrellica valoración negativa
  • 3.7 sobre 5 (9 votos)

¿Te ha parecido útil o interesante esta entrada?
dormido, valoración 1 nadapensativo, valoración 2 un poco sonrisa, valoración 3 a medias guiño, valoración 4 bastante aplauso, valoración 5 mucho

Tú opinión es muy importante, gracias por compartirla!

Los comentarios están cerrados.