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:
Modernizr.load({
test: capacidad-a-validar,
yep : 'fichero-a-cargar-si-correcto.js',
nope: 'fichero-a-cargar-si-no-soporte.js',
complete: 'cosas-a-hacer-siempre.js'
});
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:
$("input, textarea").placeholder();
El código del como utilizar un polyfill en Modernizr nos quedaría de la siguiente forma:
Modernizr.load({
test:Modernizr.input.placeholder,
nope:['https://lineadecodigo.com/js/jquery/jquery.js','https://lineadecodigo.com/js/jquery/plugins/jquery.placeholder.min.js','placeholder.js']
});
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?
