¿Cuál es el significado de polyfills en HTML5?

387

¿Cuál es el significado de polyfills en HTML5? Vi esta palabra en muchos sitios sobre HTML5, por ejemplo, HTML5-Cross-Browser-Polyfills.

Así que aquí estamos recopilando todas las cuñas, fallbacks y polyfills para implantar la funcionalidad HTML5 en navegadores que no los admiten de forma nativa.

En realidad no entiendo cuál es el significado de los polyfills.

¿Es una nueva técnica HTML5 o una biblioteca de JavaScript? Nunca escuché esta palabra antes de HTML5.

¿Y cuál es la diferencia entre cuñas, retrocesos y polyfills?

Jitendra Vyas
fuente
1
Puede consultar para una mejor comprensión blogs.msdn.com/b/jennifer/archive/2011/08/04/…
@ user3400622 Gracias por el enlace, la explicación en el enlace es muy clara.
Andrew Lam

Respuestas:

377

Un polyfill es una alternativa de navegador, hecha en JavaScript, que permite la funcionalidad que espera que funcione en los navegadores modernos para trabajar en navegadores más antiguos, por ejemplo, para admitir el lienzo (una función HTML5) en navegadores más antiguos.

Es una especie de técnica HTML5, ya que se usa junto con HTML5, pero no es parte de HTML5, y puede tener polyfills sin tener HTML5 (por ejemplo, para admitir las técnicas CSS3 que desee).

Aquí hay una buena publicación:

http://remysharp.com/2010/10/08/what-is-a-polyfill/

Aquí hay una lista completa de Polyfills y cuñas:

https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills

Calvin Froedge
fuente
66
Es decir, ie7.js también es un polyfill
Jitendra Vyas
1
Sí: "Muchas correcciones, incluida la transparencia PNG, estilos / selectores CSS, corrección de errores de representación, etc." Está agregando esta funcionalidad a través de javascript que el navegador aún no admite.
Calvin Froedge
1
Creo que la palabra Polyfills apareció después de HTML5. ¿Shim es diferente a Polyfills?
Jitendra Vyas
16
Una cuña es más generalizada. Un polyfill es un tipo de cuña. Aquí hay una pregunta que lo explica bien: stackoverflow.com/questions/6599815/…
Calvin Froedge
66
remysharp.com/2010/10/08/what-is-a-polyfill este enlace es más que una "buena publicación", en realidad es la definición completa y el origen de la palabra por la persona que acuñó la palabra. Extracto: "el producto Polyfilla (espolvoreado en los EE. UU.) Es una pasta que se puede colocar en las paredes para cubrir grietas y agujeros". La publicación también cubre el concepto que calza anterior y es diferente al polyfill. Es una lectura obligada, OMI.
codificación aaron
64

En primer lugar, aclaremos qué no es un polyfil: un polyfill no es parte del estándar HTML5. Tampoco se limita un polyfill a Javascript, aunque a menudo se hace referencia a polyfill en esos contextos.

El término polyfill en sí se refiere a un código que "le permite tener alguna funcionalidad específica que espera que los navegadores actuales o" modernos "también funcionen en otros navegadores que no tienen el soporte para esa funcionalidad incorporada".

Fuente y ejemplo de polyfill aquí:

http://www.programmerinterview.com/index.php/html5/html5-polyfill/

Jarvis
fuente
31

Un polyfill es un código (o complemento) que proporciona la tecnología que usted, el desarrollador, espera que el navegador proporcione de forma nativa.

Ranjeet Mane
fuente
2
Bien explicado.
Eugen Sunic
16

Un polyfill es una cuña que reemplaza la llamada original con la llamada a una cuña.

Por ejemplo, supongamos que desea utilizar el objeto navigator.mediaDevices, pero no todos los navegadores lo admiten. Podrías imaginar una biblioteca que proporcionara una cuña que podrías usar así:

<script src="js/MediaShim.js"></script>
<script>
    MediaShim.mediaDevices.getUserMedia(...);
</script>

En este caso, está llamando explícitamente una cuña en lugar de utilizar el objeto o método original. El polyfill, por otro lado, reemplaza los objetos y métodos en los objetos originales.

Por ejemplo:

<script src="js/adapter.js"></script>
<script>
    navigator.mediaDevices.getUserMedia(...);
</script>

En su código, parece que está utilizando el objeto navigator.mediaDevices estándar. Pero en realidad, el polyfill (adapter.js en el ejemplo) ha reemplazado este objeto con el suyo.

El que lo ha reemplazado es una cuña. Esto detectará si la característica es compatible de forma nativa y la usará si lo es, o funcionará con otras API si no lo es.

Entonces, un polyfill es una especie de cuña "transparente". Y esto es lo que Remy Sharp (quien acuñó el término) quiso decir al decir " si elimina el script polyfill, su código continuará funcionando, sin ningún cambio requerido a pesar de que se eliminó el polyfill ".

Richard Shepherd
fuente
99
¿Qué es una cuña?
Oliver Watkins
3
@ Oliver Watkins Si está familiarizado con el patrón del adaptador, entonces sabe lo que es una cuña. Shims intercepta las llamadas API y crea una capa abstracta entre la persona que llama y el objetivo. Por lo general, las cuñas se utilizan para la compatibilidad con versiones anteriores
Anurag Ratna
@AnuragRatna No usaría 'interceptar' para evitar confusiones. La intercepción generalmente se refiere al código que intercepta (de manera transparente), es decir, sin que la persona que llama lo sepa. Las cuñas proporcionan llamadas API para compatibilidad con versiones anteriores
Qetesh,