3 may. 2012

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




3 comentarios:

  1. Hola,

    He investigado mucho en Internet, visto videos y por fin he usado varios polyfills en mi web http://radioprogresando.com con Modernizr, pero ninguno funciona en IE8.

    Esto es desesperante. ¿Sería posible que escribieran un artículo más completo sobre cómo aplicar Modernizr.load, para las propiedades css?

    Por ejemplo: flexbox rgba multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations cssgradients cssreflections csstransforms csstransforms3d csstransitions
    fontface video audio bgrepeatround cssfilters mediaqueries

    ResponderEliminar
    Respuestas
    1. Tienes que pensar que modernizr funciona (o debe) en todos los navegadores.
      Primero debes poner la librería modernizr en la cabecera, tal que así

      <script src='/js/libs/modernizr-2.5.3.min.js'></script>

      Y en el final del documento lanzas el ejemplo final que te he puesto.
      Esto lo que hace es probar las características, así que si ie8 tiene esa característica no carga la librería necesaria.

      como comprenderás no puedo estar a todo lo que pones. ¿son todos de la librería de polyfills que he puesto aquí?
      Te aconsejo que hagas concesiones en algunas cosas. Es decir usa caniuse http://www.nomaspatanes.com/2012/05/css3-calc-y-caniusecom.html

      para hacerte una idea de cuanta gente lo usa y saber si merece la pena añadirlo. Por ejemplo, en la actualidad paso de los border raduis para ie8, porque creo que es algo estético y ya lo soporta el 80% de los navegadores.
      http://caniuse.com/border-radius

      Un saludo

      Eliminar
  2. Zupulido espero que ya tengas tu problema resuelto, he pasado por lo mismo desde hace un par de dias y me solucionó colocar la etiqueta en la primerisima linea de mi codigo, sin nada antespuesto. Quizas tengas algun php por ahi colado, pues colocalo debajo del doctype. xD Suerte.

    ResponderEliminar