Polyfill: módulos de código para la web moderna

Los llamados polyfills permiten usar nuevas funciones web en navegadores que ya no tienen soporte nativo. En este artículo, descubrirás qué son estos módulos de código y cómo puedes usar esta tecnología.

¿Qué quiere decir polyfill?

Un polyfill o polyfiller es un módulo de código más o menos extenso que hace que las funciones modernas de HTML, CSS o JavaScript estén disponibles en navegadores antiguos que ya no son compatibles con estas. En la mayoría de los casos, los polyfills están escritos en JavaScript, pero hay otros lenguajes de programación web que se pueden usar de base para estos scripts de llenado. Entre las funciones más importantes que pueden adaptarse a los navegadores con polyfills se incluyen componentes HTML5 como el canvas-element, basado en mapas de bits, para gráficos, diagramas y animaciones.

Nota

El término “polyfill” proviene de la marca polyfilla, que se utiliza ampliamente en Gran Bretaña y que, en realidad, es una pasta de relleno para trabajos de renovación y reacondicionamiento. Debido a su función como masa para rellenar agujeros en las paredes, el desarrollador web Remy Sharp encontró en ella la comparación adecuada para los códigos paliativos para resolver problemas, razón por la cual los bautizó así en su libro Introducing HTML5, escrito con Bruce Lawson en 2009. polyfill fue entonces adoptado como el nombre oficial.

¿Qué tipos de polyfills existen?

El hecho de que el término polyfill esté tan estrechamente ligado al HTML5 no es una coincidencia: con sus características avanzadas, que han dejado obsoletos a los vídeos en flash, entre otras cosas, la quinta versión del lenguaje de marcado de hipertexto se ha convertido rápidamente en un elemento permanente en la web. Respecto a la compatibilidad de HTML5 con los navegadores, sin embargo, el desarrollo fue relativamente lento. Además de los polyfills para HTML5, también se necesitan módulos de código polyfill para la integración de los siguientes elementos web:

  • Gráficos SVG: aunque el formato SVG (Scalable Vector Graphics) ha sido recomendado por el W3C Konsortium como formato estándar para gráficos vectoriales desde 2001, solo ha avanzado desde HTML5. Dado que muchos navegadores aún no ofrecen compatibilidad, existen polyfills de SGV, como svgweb.
  • ECMAScript: ECMAScript es el núcleo del lenguaje declarado estándar de JavaScript, que pasa revisiones periódicas para ampliar gradualmente la funcionalidad del lenguaje de scripting. Las últimas funcionalidades, como los objetos-promesa o las funciones-símbolo, funcionan también en las versiones más antiguas de navegadores gracias a polyfills de la biblioteca estándar de Java Script core-js.
  • Almacenamiento web: las alternativas a cookies Local Storage (almacenamiento permanente en las páginas del cliente) y Session Storage (almacenamiento solo de sesión actual), que pueden resumirse bajo el término genérico de almacenamiento web (Web Storage) o almacenamiento DOM (DOM Storage), tampoco son compatibles con todas las versiones de los navegadores. Un polyfill famoso, escrito para responder a estos problemas, es el polyfill de almacenamiento web, con licencia del MIT.
  • Cross-Origin Resource Sharing (CORS): CORS permite a las aplicaciones web acceder a recursos web fuera de su propio servidor. Muchos navegadores antiguos no son ya compatibles con este intercambio de datos. Se soluciona con una combinación del paquete JavaScript XDomain y el polyfill CORS XHook.
  • CSS (Cascading Style Sheets): CSS es una de las herramientas más importantes para el diseño gráfico de páginas web desde hace años. Con el paso de los años, las hojas de estilo se han vuelto cada vez más versátiles, por lo que se emplean cada vez más polyfills como interfaz para los modelos de navegadores más antiguos. Una de las soluciones más famosas es css-polyfills.js.
  • Geolocalización: durante muchos años, la API de geolocalización, usada para enviar la propia ubicación, solo se podía utilizar con la ayuda de complementos adicionales del navegador y no era compatible con los navegadores por defecto. Si quieres que la función esté disponible para los usuarios de versiones anteriores de clientes web sin extensiones, puedes utilizar un polyfill.
Nota

Para facilitar el uso de polyfills y hacerlo más eficiente, hay servicios que utilizan redes de distribución de contenido (CDN) para la entrega de scripts. Un ejemplo de ello es el proyecto Polyfill.io. En este proyecto, se ha encontrado desde principios de 2024 código malicioso propagado a través de las CDN utilizadas. Por ello, es muy importante que si estás usando el servicio Polyfill.io, elimines el código de tu página web.

¿Cómo se utilizan los polyfills? Ejemplos incluidos

Los polyfills de JavaScript, o los scripts de polyfill en general, se pueden incrustar directamente en el documento HTML de un proyecto web. Se integran a la perfección en el código fuente existente y, si se programan correctamente, solo se ejecutan si el navegador de acceso no es compatible con la función web correspondiente. Para esto, JavaScript utiliza por ejemplo la expresión if que se puede emplear para definir la compatibilidad que falta como condición para activar el script. En estos dos ejemplos se ilustra cómo se debe registrar esto exactamente en el código y cómo se ve la estructura de un polyfill en general.

Ejemplo 1: polyfill para el método JavaScript startsWith()

if (!String.prototype.startsWith) { 
    String.prototype.startsWith = function (searchString, position) { 
        position = position || 0; 
        return this.indexOf(searchString, position) === position; 
    };
javascript

Este pequeño fragmento de JavaScript permite al navegador al que llama utilizar el método JavaScript startsWith(), incluso si no es compatible con él. Este método, que forma parte de la especificación de ECMAScript 6, determina si una cadena o string determinado comienza con los caracteres o con la secuencia de otro string. Si este es el caso, devuelve el valor true, de lo contrario devuelve el valor false. La primera línea de código hace que se desactive el script si el navegador soporta el método de forma nativa.

El desarrollador Mathias Bynens ha proporcionado una variante más compleja y optimizada de polyfill para integrar el método startsWith() en GitHub.

Nota

El código indicado no funciona si el cliente web de acceso bloquea JavaScript o si este lenguaje de script está desactivado en los ajustes.

Ejemplo 2: polyfill de almacenamiento web

El segundo ejemplo de polyfill JavaScript presenta una solución de código simple que permite que el almacenamiento local o de sesión estén disponibles en los modelos de navegadores más antiguos.

if (typeof window.localStorage === 'undefined' || typeof window.sessionStorage === 'undefined') { 
    (function () { 
        var data = {}; 
 
        var Storage = function (type) { 
            function setData() { 
                // Implement the logic to set data into storage 
                var storageData = JSON.stringify(data); 
                document.cookie = type + '=' + storageData + ';path=/'; 
            } 
 
            function clearData() { 
                data = {}; 
                setData(); 
            } 
 
            return { 
                length: 0, 
                clear: function () { 
                    clearData(); 
                    this.length = 0; 
                }, 
                getItem: function (key) { 
                    return data[key] === undefined ? null : data[key]; 
                }, 
                key: function (i) { 
                    var ctr = 0; 
                    for (var k in data) { 
                        if (ctr == i) return k; 
                        ctr++; 
                    } 
                    return null; 
                }, 
                removeItem: function (key) { 
                    delete data[key]; 
                    this.length--; 
                    setData(); 
                }, 
                setItem: function (key, value) { 
                    data[key] = value + ''; 
                    this.length++; 
                    setData(); 
                } 
            }; 
        }; 
 
        // Set the local and session storage properties inside the window object 
        if (typeof window.localStorage === 'undefined') window.localStorage = new Storage('local'); 
        if (typeof window.sessionStorage === 'undefined') window.sessionStorage = new Storage('session'); 
    })(); 
}
javascript

El código aquí indicado es una Immediately Invoked Function Expression (IIFE), o sea, una expresión de función ejecutada inmediatamente. Sin embargo, antes de que el navegador la cargue, se comprueba si el cliente es compatible de forma nativa con las tecnologías de almacenamiento web, como en el primer ejemplo, utilizando la expresión if en la primera línea de código. Si este es el caso, la expresión if devuelve false (no aplicable), ya que los tipos de almacenamiento locales y de sesión están definidos. En consecuencia, el polyfill se descarta.

Compra y registra tu dominio ideal
  • Certificado SSL Wildcard
  • Registro privado
  • 1 cuenta de correo electrónico por contrato
¿Le ha resultado útil este artículo?
Utilizamos cookies propias y de terceros para mejorar nuestros servicios y mostrarle publicidad relacionada con sus preferencias mediante el análisis de sus hábitos de navegación. Si continua navegando, consideramos que acepta su uso. Puede obtener más información, o bien conocer cómo cambiar la configuración de su navegador en nuestra. Política de Cookies.
Page top