¿Habías oído hablar sobre los Polyfills? ¿Qué son? ¿Por qué existen? ¿Cómo saber cuando los debemos utilizar? y lo más importante ¿Cómo usarlos?

No cabe duda que hemos sido testigos (y seguiremos siendo) de cómo la tecnología web avanza, cada día se escriben miles de plugins nuevos y cada navegador publica nuevas actualizaciones para mantenerse al día, sin embargo, no todos los navegadores son desarrollados a la misma velocidad y eso puede hacer que las páginas web que desarrollemos funcionen bien en unos navegadores, pero en otros no tanto.

Es aquí en donde toman sentido los Polyfills!

[banner id=”1861″]

¿Qué son?

Un polyfill es un bloque de código (que podemos considerarlo un plugin) que le proporcionará cierta funcionalidad a nuestro navegador web cuando se trate de un elemento específico de HTML5 y,  por supuesto, que nuestro navegador se quede corto al momento de implementar dicho elemento.

Vamos a ver un ejemplo: en HTML5 contamos con varios tipos nuevos de input, para este caso vamos a probar el nuevo seleccionador de color.

<input type="color" />

Este nuevo control le permitirá al usuario seleccionar un color fácilmente. Gracias a HTML5 podemos hacerlo con una simple línea sin acudir a grandes y complicados controles de terceros desarrollados en jquery.

Si probamos esta línea de código en Google Chrome el control funcionará bien, y el usuario lo verá de la siguiente manera: (con un cuadro pequeño que al darle clic despliega una paleta de colores en una ventana tipo pop-up)

Puedes ejecutar el ejemplo desde JSBIN (utiliza Google Chrome).

Pero la mala noticia comienza cuando probamos este mismo control en Safari o Internet Explorer, en este caso el usuario verá un simple cuadro de texto editable (nada funcional):

Puedes ejecutar el mismo ejemplo anterior desde JSBIN (esta vez utiliza Safari o Internet Explorer).

Para conocer el soporte que éste y otros controles tienen por cada uno de los navegadores podemos utilizar la página caniuse.com, esta página nos puede dar una respuesta a la pregunta: ¿Cómo saber cuando debemos usar los Polyfills?.

Si buscamos el control que estamos utilizando (para enero, 2016) los cuadros rojos nos dirán que nuestro control no tiene soporte (dicho en otras palabras: no funciona) en Internet Explorer, Edge, Safari, iOS Safari y Opera Mini.

Clic aquí para ver la tabla actualizada.

Tomé como ejemplo éste control (Color input type), ya que podemos ver que a más de un navegador le hace falta recorrer un poco de camino para lograr implementarlo, y esto nos puede suceder con cualquier otro control de HTML5 que vayamos a utilizar.

Pero ahora viene una buena noticia: nosotros como desarrolladores de páginas web no debemos de dejar de aprovechar este control de HTML5 sólo porque algunos navegadores no lo soportan y mucho menos condicionar a nuestros usuarios a que utilicen un navegador específico.

En este caso, aplicar un polyfill a nuestra página web hará que el control sea soportado por los navegadores que nativamente no lo hacen, pero los navegadores que si lo soportan no tendrán ningún cambio. Si más adelante el navegador llegara a tener soporte nativo para dicho control, entonces dejará de usar el polyfill automáticamente (sin que tengamos que modificar nada) para usar su funcionalidad nativa.

¿Cómo usar los polyfill?

Responder a ésta pregunta va a depender de la necesidad que tengamos en nuestra aplicación, existe una gran cantidad de polyfills publicados en internet y regularmente tendremos que investigar y probar varios para definir cual es el que más nos puede servir. Sin embargo, el más popularizado puede que sea modernizr.

La página de caniuse.com también nos puede brindar información sobre polyfills disponibles (en la parte inferior de la tabla, en la sección de Resources).

Otra página que tiene una gran lista de polyfills es html5please.com. Para este caso, la búsqueda me retorno un polyfill llamado Spectrum (el cuál he decido usar para nuestro ejemplo por su facilidad de uso).

Continuando con nuestro ejemplo: en sí, no es necesario que cambiemos nada en nuestro html, solo basta con que agreguemos las referencias de la librería de Spectrum (tanto js como css), lo cual lo hacemos a través de <script> y <link> respectivamente.

https://cdnjs.cloudflare.com/ajax/libs/spectrum/1.8.0/spectrum.min.js
https://cdnjs.cloudflare.com/ajax/libs/spectrum/1.8.0/spectrum.min.css

NOTA: También es necesario que tengamos la librería de jquery, ya que spectrum la utilizada.

Una vez que tengamos nuestras librerías correctamente agregadas podremos ver nuestra página desde Internet Explorer y veremos que el control ahora se muestra de forma parecida al que vimos en Google Chrome.

Puedes probar la versión final del ejemplo en JSBIN (esta vez abre el link utilizando Internet Explorer o Safari).

Eso es todo lo que tengo que decir de los polyfill, si los conocemos bien pueden llegar a evitarnos tantos dolores de cabeza cuando hagamos una página web que será visitada desde cualquier navegador.

Elegir algunos polyfill puede ser cuestión de gustos, por eso si haz utilizado algún polyfill para algún control específico puedes contarnos en los comentarios que te ha parecido, así nos podrá servir a todos para crear una lista de opiniones variada y ver a que nos enfrentamos con ciertos controles.

No olvides suscribirte si quieres recibir más publicaciones como ésta en tu correo electrónico.

[banner id=”1861″]