modernizr y polyfills, usa html5 sin miedo a los viejos navegadores

Ayer vimos lo bueno que era html5 boilerplate(H5B, para abreviar), que nos permitía crear una página consistente entre navegadores, y ¿sabéis cual es una de las herrmientas que incluye H5B? modernizr.

¿Que es modernizr? es una librería javascript que detecta las capacidades del navegador que estas usando y poder tomar medidas al respecto.

Por ejemplo, hace poco hice una página que incluía vídeo en html5 en formato h264 (si, pasando a lado oscuro de la fuerza). Y aunque es muy bonito eso de poner:

<video controls="controls" src="video.mp4" type="video/mp4" ></video>

Cuando llega la hora de la verdad esto no funciona en firefox, (por ahora no soporta el codec h264 como dijimos en nuestro post más famoso hasta la fecha), tampoco funciona en Internet Explorer por debajo del 9.

Lo ideal sería que cuando esto no funciona, se active un javascript que convierta ese video html5 en un flash y así IE8, Firefox u Opera no tendrán problemas. A este script que "degrada" el HTML5 a otras tecnologías soportadas por tu navegador (flash, javascript, etc...) se les llama polyfills.
Aquí tenéis una lista de los más útiles/usados .

El que vamos a usar en nuestro ejemplo es html5media.js, que permite convertir la etiqueta audio o video en flash gracias a flow player.
¿que queremos? que cuando el navegador no soporte el codec h264 salte un flash para la etiqueta video.
Pues si tenemos ya modernizr cargado es tan sencillo como esto.

 <script>
if (!Modernizr.video.h264){
Modernizr.load("http://api.html5media.info/1.1.5/html5media.min.js")};
</script>

Traducido es "si modernizr detecta que el navegador no soporta la etiqueta video con el codec h264 entoces modernizr cargará el javascript html5media.min.js".
Si quitásemos el ".h264" sólo funcionaría en Internet Explorer antiguos, ya que Firefox u Opera  soportan vídeo pero no h264.

Esto se puede hacer para casi cualquier cosa por ejemplo, para añadir placeholder en los formularios (necesita jquery).

 <script>
if(!Modernizr.input.placeholder){
    Modernizr.load("https://github.com/mathiasbynens/jquery-placeholder/blob/master/jquery.placeholder.min.js")
};
</script>

Si ya queremos rizar el rizo y tenemos 20 cosas como esta lo mejor es hacerlo de una tacada tal que así


 <script>
Modernizr.load(
  {
  test:  Modernizr.video.h264 ,
  nope: 'http://api.html5media.info/1.1.5/html5media.min.js'
  },

  {
  test:   Modernizr.input.placeholder ,
  nope: ' https://github.com/mathiasbynens/jquery-placeholder/blob/master/jquery.placeholder.min.js '
  }
);
</script>


Se puede poner además de "nope:" un "yep:" para poner que haga algo si tiene esa característica (por ejemplo un css para maquetar los vídeos, etc...)

Esto os quitará a los desarrolladores web un montón de trabajo y espero que os sea de tanta utilidad como lo ha sido para mi