Polyfill: cubriendo las grietas en la web

Polyfills
Escrito por: Cesar F. Miranda Salcedo
enero 29, 2021

En esta entrada vamos a tocar un tema que muchas veces damos por sentado cuando trabajamos con frameworks o con librerías de terceros y que tienen un gran impacto al momento de diseñar una página web.

Actualmente existe una gran variedad de dispositivos para consumir contenido web, gracias a la obsolescencia programada, la brecha entre dispositivos actualizados y desactualizados (Android / iOS / Windows Phone) es abismal.

Ni hablar de Windows y Microsoft, que cada versión de sistema operativo viene con una nueva versión de navegador web, que muchas veces es difícil actualizar a no ser que cumplas con los requisitos necesarios (actualizar el sistema operativo).

Existe el caso de personas con versiones antiguas de sistemas operativos y navegadores, tan solo por el hecho de que se sienten cómodos con lo que tienen o que el ordenador que usan, es muy viejo y no es posible instalar una versión resiente de sistema operativo.

Es aquí donde entran los polyfills.

¿Qué es un polyfill?

Un polyfill o polyfiller es un módulo de código, plugin (o script) que sirve para implementar funcionalidades de HTML5 y CSS3 a navegadores antiguos (internet explorer 6, 7 y 8) que no lo admiten de forma nativa.

En la mayoría de los casos es código escrito en JavaScript, (esto no quiere decir que solo se limite a esta tecnologia) que implementa un estándar HTML5, CSS.

Otro de sus funciones es dar soporte a funcionalidades nuevas, que aún no tienen una integración nativa en el navegador.

El término fue usado por primera vez por Remy Sharp, desarrollador web y co-autor, junto con Bruce Lawson del libro Introducing HTML5 en el año 2009.

Algunos polyfills de ejemplo

Estos son algunos ejemplos de polyfills que puedes usar para tus proyectos, solo recuerda que si estás usando un framework, probablemente el polyfill que necesitas, ya venga integrado.

Core-js

Agrega funcionalidades del ECMAScript 2021 en navegadores antiguos, como las promesas, funciones de flecha, colecciones, propuestas del ECMAScript y de la W3C.

Esta librería viene integrada con Babel que se encargará de usar los módulos necesarios de core-js en tu código.

HTML5 Shiv

Script que da soporte a elementos de seccionamiento HTML5 (section y nav) en versiones de IE (Internet Explorer) de la 6 a la 9, Safari 4.x (e iPhone 3.x), y Firefox 3.x.

-prefix-free

Permite que los navegadores actuales reconozcan las versiones sin prefijos de varias propiedades de CSS3, no hay necesidad de que el desarrollador escriba todos los prefijos de los proveedores.

SessionStorage

La funcionalidad sessionStorage está disponible en los navegadores más recientes (IE8 y posteriores), pero no en IE7 y versiones anteriores.

Existe un polyfill de almacenamiento que se encarga de dar soporte a navegadores antiguos que no soportan sessionStorage.

En resumen

Son de gran ayuda al brindar soporte a versiones antiguas de navegadores, y buenos para unificar el soporte a nuestros proyectos.

Si estás trabajando con un framework como Angular 2+, React o Vue. En ese caso el mismo framework ya tiene inlcuido su set de polyfills, lo que es de gran ayuda, ya que nos permite centrarnos en la solución principal y dejar la compatibilidad al framework.

En caso de que no trabajes con algun framework. En el GitHub de Modernizr, hay una colección de plugins, seguro ahí encuentras la solución de código que necesitas.

¿Necesitas ayuda?

Plectro Lab es una Agencia de desarrollo web con amplia experiencia desarrollando sitios web, aplicación móviles, redacción de contenido y SEO.

Quiero más información

También te podría interesar…

0 Comments

Submit a Comment

Tu dirección de correo electrónico no será publicada.