⇪

Cómo utilizar Modernizr

facebook-svg gplus-svg twitter-svg

Modernizr es una pequeña librería JavaScript que detecta si el navegador del usuario soporta o no las nuevas funcionalidades del HTML5 y CSS3.
Con Modernizr podemos utilizar las nuevas características del HTML5 y CSS3 y obtener resultados coherentes en los diferentes navegadores.

A continuación veremos como nos puede ayudar Modernizr en un caso concreto: flexbox.

Descargar modernizr

1. Primero marcamos solo lo que nos interesa ( descargar modernizr) :

  • Flexible Box Model (flexbox): en el fieldset que recoge las nuevas características de CSS3 marcamos las casilla Flexible Box Model (flexbox). Esto nos ayuda a detectar si el navegador que utiliza el usuario soporta esta característica o no.
  • CSS Reflections: en este momento Firefox no soporta los reflejos CSS. Aunque no tenemos intención de utilizar reflejos esto nos viene de maravilla: utilizaremos Firefox para crear y verificar el CSS de substitución: el que utiliza posicionamiento flotante en lugar de flexbox.
  • html5shiv: una solución JavaScript que hace que los nuevos elementos del HTML5 ( <header>, <section>, <article> etc... ) sean correctamente interpretados por InternetExplorer 7 y 8.
  • Add CSS Classes: es una funcionlidad de modernizr que añade clases al <html>. En el caso de flexbox: si el navegador del usuario suporta flexbox: la clase a añadir es flexbox. Por lo contrario: si el navegador del no suporta flexbox: la clase a añadir es no-flexbox.

download modernizr

Después de decidir que es lo que necesita, pulse el botón GENERATE! para generar el código comprimido de modernizr.js. Para un formato sin comprimir marque la casilla Don't Minify Source. Podemos copiar el código, o podemos descargarlo.

 

Como funciona

Después de descargar Modernizr y guardarlo, añadimos un enlace hacia modernizr.js o como queremos llamarlo. Lo ponemos en el <head>.

<script src="js/modernizr.js"></script>

Probablemente algunos se preguntan ¿por qué en el <head> si sabemos que hay que insertar el JavaScript al final del <body>, ya que los scripts bloquean el renderizado mientras se están descargando y ejecutando, y si los ponemos en el <head> ralentizan  la página?
El problema es que Modernizr tiene el html5shiv incorporado, y para que este funcione tiene que estar en el <head>.

El segundo paso es asignar una clase al <html>, así:

<html class="no-js">

Si JavaScript no funciona, tampoco Modernizr, y ni otras funcionalidades JavaScript. Podemos utilizar la clase .no-js para dar formato en este caso.

Por de otra parte si JavaScript funciona, una vez que la página se haya cargado, Modermizr elimina la clase .no-js y la reemplaza ( dinámicamente ) por por algo asi:

En Chrome 37

<html class=" js flexbox flexboxlegacy canvas canvastext webgl no-touch geolocation postmessage websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients cssreflections csstransforms csstransforms3d csstransitions fontface generatedcontent video audio localstorage sessionstorage webworkers applicationcache svg inlinesvg smil svgclippaths">

En FireFox 32

<html class=" js flexbox canvas canvastext webgl no-touch geolocation postmessage no-websqldatabase indexeddb hashchange history draganddrop websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients no-cssreflections csstransforms csstransforms3d csstransitions fontface generatedcontent video audio localstorage sessionstorage webworkers applicationcache svg inlinesvg smil svgclippaths">

En IE 9

<html class=" js no-flexbox canvas canvastext no-webgl no-touch geolocation postmessage no-websqldatabase no-indexeddb hashchange no-history draganddrop no-websockets rgba hsla multiplebgs backgroundsize no-borderimage borderradius boxshadow no-textshadow opacity no-cssanimations no-csscolumns no-cssgradients no-cssreflections csstransforms no-csstransforms3d no-csstransitions fontface generatedcontent video audio localstorage sessionstorage no-webworkers no-applicationcache svg inlinesvg smil svgclippaths">

De hecho en nuestro caso ( al generar el código de Modernizr hemos escogido solo dos características del CSS ) el código tendrá este aspecto:

<html  class=" js flexbox cssreflections"> <!--para Chrome 37 -->
<html  class=" js flexbox no-cssreflections"> <!-- para FF 32 -->
<html class=" js no-flexbox no-cssreflections"> <!-- para IE 9 -->

¿Que quiere decir esto?

El Chrome 37 soporta tanto flexbox como los reflejos de CSS ( box-reflect ). Por lo tanto Modernizr da al <html>  una clase js ( porque el JavaScript funciona ), otra clase flexbox ( porque Chrome soporta las cajas flexibles ) y una clase cssreflections ( porque Chrome también soporta los reflejos de CSS ).
Por de otra parte FireFox 32 soporta flexbox, pero no soporta los reflejos de CSS. Por lo tanto recibirá las clases js, flexbox y no-cssreflections.
Finalmente InternetExplorer 9 que no soporta ni flexbox ni reflejos recibirá como clases js, no-flexbox y no-cssreflections.

Es obvio que podemos utilizar estas clases en el CSS para dar formato en función de si el navegador del usuario soporta las nuevas funcionalidades de CSS3 o no, y es lo que haremos a continuación.