Polyfill (programação) - Polyfill (programming)

Para outros usos, consulte Polyfill (desambiguação) .

No desenvolvimento da web , um polyfill é o código que implementa um recurso em navegadores que não oferecem suporte ao recurso. Na maioria das vezes, refere-se a uma biblioteca JavaScript que implementa um padrão da web HTML5 ou CSS , seja um padrão estabelecido (suportado por alguns navegadores) em navegadores mais antigos ou um padrão proposto (não suportado por nenhum navegador) em navegadores existentes. Formalmente, "um polyfill é uma correção para uma API de navegador ".

Polyfills permite que os desenvolvedores da web usem uma API independentemente de ela ser ou não suportada por um navegador, e geralmente com sobrecarga mínima. Normalmente, eles primeiro verificam se um navegador oferece suporte a uma API e a usam se disponível, caso contrário, usam sua própria implementação. Os próprios Polyfills usam outros recursos mais compatíveis e, portanto, diferentes polyfills podem ser necessários para diferentes navegadores. O termo também é usado como verbo: polyfilling é fornecer um polyfill para um recurso.

Definição

O termo é um neologismo , cunhado por Remy Sharp, que exigiu uma palavra que significava "replicar uma API usando JavaScript (ou Flash ou qualquer outro) se o navegador não a tiver nativamente" enquanto co-escrevia o livro Introducing HTML5 in 2009. Formalmente, "um shim é uma biblioteca que traz uma nova API para um ambiente mais antigo, usando apenas os meios desse ambiente.", E os polyfills se encaixam exatamente nessa definição; o termo shim também foi usado para os primeiros polyfills. No entanto, para a Sharp, shim conotou APIs não transparentes e soluções alternativas, como GIFs espaçadores para layout, às vezes conhecido como shim.gif, e termos semelhantes como aprimoramento progressivo e degradação elegante não eram apropriados, então ele inventou um novo termo. O termo é baseado na marca de pasta de recheio polivalente Polyfilla , uma pasta usada para cobrir rachaduras e buracos em paredes, e o significado "preencher buracos (em funcionalidade) de várias ( poli- ) maneiras". A palavra ganhou popularidade desde então, principalmente devido ao seu uso por Paul Irish e na documentação da Modernizr .

A distinção que Sharp faz é:

O que torna um polyfill diferente das técnicas que já temos, como um shim, é o seguinte: se você removesse o script polyfill, seu código continuaria a funcionar, sem nenhuma alteração necessária , apesar da remoção do polyfill.

Esta distinção não é feita por outros autores. Às vezes, várias outras distinções são feitas entre shims, polyfills e fallbacks, mas não há distinções geralmente aceitas: a maioria considera os polyfills uma forma de shim. O termo polyfiller também é encontrado ocasionalmente.

Exemplos

core-js

core-js é o polyfill de biblioteca padrão de JavaScript mais popular e poderoso . Inclui polyfills para ECMAScript até 2021: promessas, símbolos, coleções, iteradores, matrizes digitadas, muitos outros recursos, propostas ECMAScript, alguns recursos de plataforma cruzada WHATWG / W3C e propostas como URL. Você pode carregar apenas os recursos necessários ou usá-los sem poluição do namespace global. Ele pode ser integrado ao Babel , o que permite que ele injete automaticamente os módulos core-js necessários em seu código.

HTML5 Shiv

Nas versões do IE anteriores à 9, os elementos HTML desconhecidos gostam <section>e <nav>seriam analisados ​​como elementos vazios, quebrando a estrutura de aninhamento da página e tornando esses elementos impossíveis de estilizar usando CSS . Um dos polyfills mais usados, html5shiv, explora outra peculiaridade do IE para contornar esse bug: chamar document.createElement("tagname")cada um dos novos elementos HTML5, o que faz com que o IE os analise corretamente. Também inclui um estilo padrão básico para esses elementos HTML5.

-sem prefixo

Embora a maioria dos polyfills tenha como alvo navegadores desatualizados, alguns existem para simplesmente empurrar os navegadores modernos um pouco mais para a frente. O polyfill sem prefixo de Lea Verou é um tal polyfill, permitindo que os navegadores atuais reconheçam as versões não prefixadas de várias propriedades CSS3 em vez de exigir que o desenvolvedor escreva todos os prefixos do fornecedor. Ele lê as folhas de estilo da página e substitui quaisquer propriedades não prefixadas por suas contrapartes prefixadas reconhecidas pelo navegador atual.

Selectivizr

O Selectivizr de Keith Clark é um polyfill popular que faz muitos seletores CSS3 funcionarem no IE 8 e versões anteriores. Ele lê as folhas de estilo da página em busca de vários seletores CSS3 conhecidos e, em seguida, usa uma biblioteca de seletores JavaScript para consultar o documento em busca de elementos que correspondam a esses seletores, aplicando os estilos diretamente a esses elementos. Ele oferece suporte a várias bibliotecas de seletor de JavaScript, como jQuery .

Flexie

Possivelmente um dos recursos mais esperados do CSS3, o Flexible Box Layout (também conhecido como Flexbox) promete ser uma ferramenta extremamente poderosa para o layout de elementos de interface. Os motores WebKit e Mozilla suportaram um rascunho de sintaxe preliminar por anos. Flexie implementa suporte para a mesma sintaxe no IE e Opera. No entanto, o rascunho das especificações passou por uma revisão drástica para uma nova (e muito mais poderosa) sintaxe, que ainda não é suportada pelo Flexie. O Flexie ainda pode ser usado junto com a sintaxe antiga, mas o desenvolvedor deve se certificar de que eles incluem a nova sintaxe para navegadores futuros.

CSS3 PIE

PIE ("Progressive Internet Explorer") implementa algumas das propriedades de decoração de caixa CSS3 mais populares ausentes no IE, incluindo raio de borda e sombra de caixa para IE 8 e inferior, e planos de fundo gradiente linear para IE 9 e inferior. Chamado como um comportamento HTC (um recurso proprietário do IE), ele procura as propriedades CSS3 não suportadas em elementos específicos e renderiza essas propriedades usando VML para IE 6–8 e SVG para IE 9. Sua renderização é quase indistinguível de implementações de navegador nativas e lida bem com a modificação dinâmica de DOM.

JSON 2

Douglas Crockford escreveu originalmente json2.js como uma API para ler e escrever seu (então promissor) formato de dados JSON . Ele se tornou tão amplamente usado que os fornecedores de navegadores decidiram implementar sua API nativamente e transformá-la em um padrão de fato ; Como json2.js agora implementa recursos nativos de navegadores mais novos em navegadores mais antigos, ele se tornou um polyfill em vez de uma biblioteca.

es5-shim

ECMAScript 5th Edition ("ES5") traz alguns recursos de script novos e úteis e, como são sintaticamente compatíveis com mecanismos JavaScript mais antigos, podem ser polipilados principalmente por métodos de patch em objetos JS integrados. Este polyfill es5-shim faz isso em duas partes: es5-shim.js contém os métodos que podem ser totalmente polyfilled e es5-sham.js contém implementações parciais de outros métodos que dependem muito do mecanismo subjacente para funcionar com precisão.

FlashCanvas

FlashCanvas é uma implementação da API HTML5 Canvas usando um plug-in Adobe Flash . Um polyfill comercial raro, ele vem em uma versão paga, bem como em uma versão gratuita, que carece de alguns recursos avançados, como sombras.

MediaElement.js

Suporte polyfills de MediaElement.js de John Dyer para elementos <video>e <audio>, incluindo a API HTML5 MediaElement, em navegadores mais antigos que usam plug-ins Flash ou Silverlight. Ele também fornece uma interface do usuário opcional do media player para esses elementos, que é consistente em todos os navegadores.

ID do navegador

Artigo principal: Mozilla Persona

Protocolo de autenticação proposto pela Mozilla, não conseguiu ganhar força.

Webshims Lib

Webshims Lib de Alexander Farkas agrega muitos outros polyfills em um único pacote e carrega condicionalmente apenas aqueles necessários para o navegador visitante.

Veja também

Notas

Referências

links externos