Polyfill (programación)

En el desarrollo de software , un polyfill es un código que implementa una nueva característica estándar de un entorno de implementación dentro de una versión antigua de ese entorno que no admite de forma nativa la característica. La mayoría de las veces, se refiere al código JavaScript que implementa un estándar web HTML5 o CSS , ya sea un estándar establecido (compatible con algunos navegadores) en navegadores más antiguos o un estándar propuesto (no compatible con ningún navegador) en navegadores existentes. Los polyfills también se utilizan en PHP y Python . ^[1]

Los polyfills permiten a los desarrolladores web utilizar una API independientemente de si es compatible con un navegador o no, y normalmente con una sobrecarga mínima. Normalmente, primero comprueban si un navegador es compatible con una API y la utilizan si está disponible; de ​​lo contrario, utilizan su propia implementación. ^{[2] [3]} Los polyfills utilizan otras funciones más compatibles, por lo que pueden ser necesarios diferentes polyfills para diferentes navegadores. El término también se utiliza como verbo: polyfilling es proporcionar un polyfill para una función.

El término es un neologismo , acuñado por Remy Sharp, quien requería una palabra que significara "replicar una API usando JavaScript (o Flash o lo que sea) si el navegador no lo tiene de forma nativa" mientras coescribía el libro Introducing HTML5 en 2009. ^{[4] [5]} Formalmente, "un shim es una biblioteca que trae una nueva API a un entorno más antiguo, utilizando solo los medios de ese entorno". ^[2] Los polyfills se ajustan exactamente a esta definición; el término shim también se usó para los primeros polyfills. ^[6] Sin embargo, para Sharp shim connotaba API no transparentes y soluciones alternativas, como GIF espaciadores para diseño, a veces conocidos como shim.gif, y términos similares como mejora progresiva y degradación elegante no eran apropiados, por lo que inventó un nuevo término. ^[5] El término se basa en la marca de pasta de relleno multipropósito Polyfilla , una pasta utilizada para cubrir grietas y agujeros en las paredes, y el significado de "rellenar agujeros (en funcionalidad) de muchas (poli) maneras". Desde entonces, la palabra ha ganado popularidad, particularmente debido a su uso por parte de Paul Irish y en la documentación de Modernizr . ^{[5] [7]}

La distinción que hace Sharp es: ^[4]

Lo que hace que un polyfill sea diferente de las técnicas que ya tenemos, como un shim, es esto: si eliminas el script polyfill, tu código seguirá funcionando, sin necesidad de realizar cambios a pesar de que se haya eliminado el polyfill.

Otros autores no hacen esta distinción. ^[2] A veces se hacen otras distinciones entre calces, polyfills y fallbacks, pero no hay distinciones generalmente aceptadas: la mayoría considera que los polyfills son una forma de calce. ^[8] El término polyfiller también se encuentra ocasionalmente. ^[9]

core-js ^[10] es uno de los polyfills de la biblioteca estándar de JavaScript más populares ^{[11] . Incluye polyfills para} ECMAScript hasta la última versión del estándar: promesas, símbolos, colecciones, iteradores, matrices tipadas, muchas otras características, propuestas de ECMAScript, algunas características y propuestas multiplataforma de WHATWG / W3C como . Puede cargar solo las características requeridas o usarlo sin contaminación del espacio de nombres global. Se puede integrar con Babel , lo que le permite inyectar automáticamente los módulos core-js requeridos en su código. URL

En versiones de IE anteriores a la 9, los elementos HTML desconocidos como <section>y <nav>se analizaban como elementos vacíos, lo que rompía la estructura de anidación de la página y hacía que esos elementos fueran imposibles de diseñar con CSS . Uno de los polyfills más utilizados, html5shiv, ^[a] explota otra peculiaridad de IE para solucionar este error: llama document.createElement("tagname")a cada uno de los nuevos elementos HTML5, lo que hace que IE los analice correctamente. También incluye un estilo predeterminado básico para esos elementos HTML5.

Aunque la mayoría de los polyfills están destinados a navegadores obsoletos, algunos existen simplemente para hacer que los navegadores modernos avancen un poco más. El polyfill -prefix-free de Lea Verou es un polyfill de este tipo, que permite a los navegadores actuales reconocer las versiones sin prefijo de varias propiedades CSS3 en lugar de requerir que el desarrollador escriba todos los prefijos de los proveedores. Lee las hojas de estilo de la página y reemplaza cualquier propiedad sin prefijo con sus contrapartes con prefijo reconocidas por el navegador actual.

Selectivizr de Keith Clark es un polyfill popular que hace que muchos selectores CSS3 funcionen en IE 8 y versiones anteriores. Lee las hojas de estilo de la página en busca de una cantidad de selectores CSS3 conocidos y luego utiliza una biblioteca de selectores JavaScript para consultar el documento en busca de elementos que coincidan con esos selectores y aplicar los estilos directamente a esos elementos. Admite varias bibliotecas de selectores JavaScript, como jQuery .

Posiblemente una de las características más esperadas de CSS3, Flexible Box Layout (también conocido como Flexbox) promete ser una herramienta extremadamente poderosa para diseñar elementos de interfaz. Los motores WebKit y Mozilla han admitido una sintaxis preliminar durante años. Flexie implementa soporte para esa misma sintaxis en IE y Opera. Sin embargo, la especificación preliminar ha sufrido una revisión drástica para una sintaxis nueva (y mucho más poderosa), que aún no es compatible con Flexie. Flexie aún se puede usar junto con la sintaxis anterior, pero el desarrollador debe asegurarse de incluir la nueva sintaxis también para los navegadores futuros.

PIE ("Progressive Internet Explorer") implementa algunas de las propiedades de decoración de cajas CSS3 más populares que faltan en IE, incluidas border-radius y box-shadow para IE 8 y anteriores, y fondos con degradado lineal para IE 9 y anteriores. Invocado como un comportamiento HTC (una característica propietaria de IE), busca las propiedades CSS3 no compatibles en elementos específicos y representa esas propiedades utilizando VML para IE 6–8 y SVG para IE 9. Su representación es en su mayoría indistinguible de las implementaciones nativas del navegador y maneja bien la modificación dinámica del DOM.

Douglas Crockford escribió originalmente json2.js como una API para leer y escribir su (por entonces prometedor) formato de datos JSON . Se volvió tan ampliamente utilizado que los proveedores de navegadores decidieron implementar su API de forma nativa y convertirlo en un estándar de facto ; dado que json2.js ahora implementa características nativas de los navegadores más nuevos en navegadores más antiguos, se ha convertido en un polyfill en lugar de una biblioteca.

ECMAScript 5th Edition ("ES5") incorpora algunas nuevas y útiles funciones de scripting y, dado que son compatibles sintácticamente con motores JavaScript más antiguos, en su mayoría se pueden rellenar con múltiples objetos mediante parches de métodos en objetos JS integrados. Este polyfill de es5-shim lo hace en dos partes: es5-shim.js contiene aquellos métodos que se pueden rellenar con múltiples objetos por completo y es5-sham.js contiene implementaciones parciales de los otros métodos que dependen demasiado del motor subyacente para funcionar con precisión.

FlashCanvas es una implementación de la API Canvas de HTML5 que utiliza un complemento de Adobe Flash . Es un polyfill comercial poco común que viene en una versión paga y otra gratuita, a la que le faltan algunas funciones avanzadas, como las sombras.

El polyfill MediaElement.js de John Dyer admite elementos <video>y <audio>, incluida la API MediaElement de HTML5, en navegadores más antiguos que utilizan complementos Flash o Silverlight. También proporciona una interfaz de usuario de reproductor multimedia opcional para esos elementos, que es uniforme en todos los navegadores.

Una biblioteca de JavaScript creada por Andrew Betts que implementó Polyfill. En febrero de 2024, el dominio de la biblioteca fue adquirido por la empresa Funnull, con sede en China, y en pocos meses se convirtió en parte de un ataque a la cadena de suministro . ^{[12] [13]}

El protocolo de autenticación propuesto por Mozilla no logró ganar fuerza. ^[14]

La biblioteca Webshims de Alexander Farkas agrega muchos otros polyfills en un solo paquete y carga condicionalmente solo aquellos que necesita el navegador visitante.

Hyphenopoly.js permite la separación automática de palabras si el navegador no la admite para el idioma del documento respectivo. ^[15]

• Patrón adaptador
• Calce (informática)
• Biblioteca de envoltorios
• Diseño web adaptativo
• Compatibilidad con versiones anteriores

• "Lista de polyfills que ofrecen funciones HTML5". GitHub: Proyecto Modernizr .
• Manian, Divya; Irish, Paul ; Branyen, Tim; Montgomery, Connor; Verschaeve, Arthur; et al. (eds.). "HTML5 Polyfill List by Feature". HTML5 Please . Las recomendaciones... representan el conocimiento colectivo de los desarrolladores que han estado en las trincheras de HTML5.
• "¿Qué son los PolyFills en Javascript?". Más información en Few . 5 de septiembre de 2013.