Qual é o significado de polyfills no HTML5?

387

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?

Jitendra Vyas
fonte
11
Você pode verificar para entender melhor blogs.msdn.com/b/jennifer/archive/2011/08/04/…
@ user3400622 Obrigado pelo link, a explicação no link é muito clara.
Andrew Lam

Respostas:

377

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

Calvin Froedge
fonte
6
Então é ie7.js dizer é também um polyfill
Jitendra Vyas
11
Sim: "Muitas correções, incluindo transparência PNG, estilos / seletores de CSS, correções de erros de renderização etc." Ele está adicionando essa funcionalidade via javascript, que o navegador ainda não suporta.
Calvin Froedge
11
Acho que a palavra Polyfills surgiu depois do HTML5. O Shim é diferente do Polyfills?
Jitendra Vyas
16
Um calço é mais generalizado. Um polyfill é um tipo de calço. Aqui está uma pergunta que explica bem: stackoverflow.com/questions/6599815/…
Calvin Froedge
6
remysharp.com/2010/10/08/what-is-a-polyfill este link é mais do que apenas um "bom post", é na verdade a definição completa e a origem da palavra pela pessoa que cunhou a palavra. Trecho: "o produto Polyfilla (spackling nos EUA) é uma pasta que pode ser colocada nas paredes para cobrir rachaduras e buracos". O post também aborda o conceito de que o calço é anterior e é diferente do polyfill. É uma leitura obrigatória, IMO.
aaron-coding
64

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/

Jarvis
fonte
31

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.

Ranjeet Mane
fonte
2
Bem explicado.
Eugen Sunic
16

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 ".

Richard Shepherd
fonte
9
o que é um calço?
Oliver Watkins
3
@ Oliver Watkins Se você está familiarizado com o padrão do adaptador, sabe o que é um calço. Shims intercepta chamadas de API e cria uma camada abstrata entre o chamador e o destino. Tipicamente calços são usadas para compatibilidade
Anurag Ratna
@AnuragRatna Eu não usaria 'interceptar' para evitar confusão. Interceptar geralmente se refere ao código que (de forma transparente) intercepta, ou seja, sem que o chamador saiba. Calços fornecem chamadas de API para compatibilidade com versões anteriores
Qetesh