Como utilizar un Polyfill con Modernizr

17/feb/2012 JavaScript , , 2 Comentarios
modernizr

Modernizr como librería Javascript está orientada a poder conocer el soporte de las capacidades CSS3 y HTML5 cuando nos ejecutemos en un determinado navegador. Pero la potencia de Modernizr no se queda solo ahí, si no que podemos hacer otras cosas como utilizar un polyfill.

Pero, ¿qué es un polyfill? Pues un polyfill es como se denomina a una librería Javascript que nos permite cubrir las capacidades HTML5/CSS3 que los navegadores no soportan. Es decir, completan al navegador para que se pueda ejecutar una página web construida con HTML5/CSS3 sin problemas.

Es decir, el código que creemos será estándar HTML5/CSS3 de tal manera que Modernizr nos ayudará a utilizar solo el polyfill si se necesita debido a las carencias del navegador.

Lo bueno es que Modernizr ya cuenta con una extensa librería de Polyfills.

En nuestro ejemplo, que nos explique como utilizar un Polyfill en Modernizr, vamos a crear una página que tenga un Placeholder y en el caso que no haya soporte del placeholder utilizaremos un plugin de jQuery que nos simule en Placeholder. Ambos artículos ya explicados en Línea de Código.

Para utilizar el polyfill de Modernizr tenemos que conocer el método Modernizr.load. La filosofía de este método es la siguiente:

  1. Modernizr.load({
  2. test: capacidad-a-validar,
  3. yep : 'fichero-a-cargar-si-correcto.js',
  4. nope: 'fichero-a-cargar-si-no-soporte.js',
  5. complete: 'cosas-a-hacer-siempre.js'
  6. });

Es decir, se testea la capacidad de HTML5/CSS3 que queramos cubrir. Si hay soporte se cargan los ficheros Javascript o CSS3 que haya en la parte del yep. Si no se soporta la propiedad testeada, se cargan los ficheros del nope. Y siempre, pase lo que pase, se carga lo que haya en complete.

Nosotros vamos a testear la propiedad Modernizr.input.placeholder que valida si hay soporte de placeholders. En el caso de que no lo haya cargamos el plugin 'jquery.placeholder.js' y lo inicializamos.

Para inicializar el plugin tendremos que ejecutar la siguiente línea de código:

  1. $("input, textarea").placeholder();

El código del como utilizar un polyfill en Modernizr nos quedaría de la siguiente forma:

  1. Modernizr.load({
  2. test:Modernizr.input.placeholder,
  3. nope:['http://lineadecodigo.com/js/jquery/jquery.js','http://lineadecodigo.com/js/jquery/plugins/jquery.placeholder.min.js','placeholder.js']
  4. });

En placeholder.js hemos metido la inicialización del plugin.

Esperamos que se haya entendido el concepto del polyfill en Modernizr y cómo cargarlos. En vuestro caso, ¿qué polyfills estás utilizando?

Vídeos sobre Modernizr

Difunde el Conocimiento

Si te ha gustado el artículo o te ha sido de utilidad, no dejes de compartirlo con tus amigos en las redes sociales... Te estaremos muy agradecidos. :-D

2 comentarios en “Como utilizar un Polyfill con Modernizr”

Víctor Cuervo

Crear un slider con jQuery - Linea de Codigo

[…] En concreto utilizamos el plugin fd-slider. Además vamos a utilizar la técnica de polyfills que vimos el otro día con el ejemplo sobre un placeholder. […]

Víctor Cuervo

Iván

Un excelente artículo. Aunque creo que hay que ser pruedente en su uso y emplear polifylls únicamente si es necesario. Añadir código para redondear las esquinas de un botón en IE7, por ejemplo, no me parece demasiado justificado.

¿Algo que nos quieras comentar?

Déjanos tu comentario, no te preocupes que tu email no será publicado

*


*