Qual é o significado de polyfills no HTML5?

Qual é o significado de polyfills no HTML5? Eu vi essa palavra em muitos sites sobre HTML5, por exemplo, HTML5-Cross-Browser-Polyfills.

Então, aqui estamos coletando todos os shims, fallbacks e polyfills para implantar a funcionalidade HTML5 em navegadores que não os suportam nativamente.

Na verdade, eu não entendi qual é o significado de polyfills.

É uma nova técnica HTML5 ou uma biblioteca JavaScript? Eu nunca ouvi essa palavra antes do HTML5.

E qual é a diferença entre calços, fallbacks e polyfills?

Um polyfill é um fallback de navegador, feito em JavaScript, que permite que a funcionalidade que você espera trabalhar em navegadores modernos funcione em navegadores mais antigos, por exemplo, para suportar canvas (um recurso HTML5) em navegadores mais antigos.

É uma espécie de técnica HTML5, já que é usada em conjunto com o HTML5, mas não faz parte do HTML5, e você pode ter polyfills sem o HTML5 (por exemplo, para suportar as técnicas CSS3 desejadas).

Aqui está um bom post:

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

Aqui está uma lista abrangente de Polyfills e calços:

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

Primeiramente, vamos esclarecer o que não é um polilfil: Um polil preenchimento não faz parte do Padrão HTML5. Também não é um polyfill limitado ao Javascript, mesmo que você veja frequentemente polyfills nesses contextos.

O próprio termo polyfill refere-se a algum código que "permite que você tenha alguma funcionalidade específica que você espera em navegadores atuais ou" modernos "que também funcionem em outros navegadores que não têm suporte para essa funcionalidade incorporada".

Fonte e exemplo de polyfill aqui:

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

Um polyfill é um pedaço de código (ou plug-in) que fornece a tecnologia que você, desenvolvedor, espera que o navegador forneça de forma nativa.

Um polyfill é um calço que substitui a chamada original pela chamada para um calço.

Por exemplo, suponha que você queira usar o objeto navigator.mediaDevices, mas nem todos os navegadores suportam isso. Você pode imaginar uma biblioteca que forneceu um calço que você pode usar assim:

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

Nesse caso, você está chamando explicitamente um calço em vez de usar o objeto ou método original. O polyfill, por outro lado, substitui os objetos e métodos nos objetos originais.

Por exemplo:

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

No seu código, parece que você está usando o objeto navigator.mediaDevices padrão. Mas, na verdade, o polyfill (adapter.js no exemplo) substituiu esse objeto pelo seu próprio.

O que ele substituiu é um calço. Isso detectará se o recurso é suportado nativamente e o utilizará, se for, ou contornará usando outras APIs, se não for.

Portanto, um polyfill é uma espécie de calço "transparente". E foi isso que Remy Sharp (que cunhou o termo) quis dizer ao dizer " se você removesse o script de polyfill, seu código continuaria funcionando, sem nenhuma alteração necessária, apesar da remoção do polyfill ".