# O que são polyfills?

**Os polyfills** são componentes de código que tornam os recursos mais recentes da Web utilizáveis em navegadores que não oferecem suporte nativo a esses recursos. Este artigo explica o que são esses componentes de código práticos e como você pode usá-los.

## O que são polyfills e em quais linguagens eles podem ser escritos?

Um polyfill, às vezes chamado de Polyfiller, é um bloco de código de complexidade variável que torna as funções modernas de HTML, CSS ou JavaScript disponíveis em navegadores mais antigos que não são compatíveis com elas nativamente. A maioria dos polyfills é escrita em JavaScript, mas outras [linguagens de programação da Web](https://www.ionos.com/digitalguide/websites/web-development/web-programming-languages/) também podem servir de base para scripts de preenchimento. Alguns dos recursos mais importantes que os polyfills disponibilizam em diferentes navegadores da Web são os componentes [HTML5](https://www.ionos.com/digitalguide/websites/web-development/what-is-html5/), como os elementos de tela baseados em bitmap para gráficos, tabelas e animações.

Nota O termo “polyfill” é derivado da popular marca britânica Polyfilla, que é um composto de enchimento para trabalhos de renovação e restauração. O desenvolvedor da Web Remy Sharp viu uma comparação adequada entre o **filler** e esses úteis **códigos de solução**, já que o objetivo de ambos é preencher lacunas. Com o último, as lacunas a serem preenchidas são lacunas na funcionalidade do navegador. O conceito foi cunhado no livro de 2009 de Sharp **“Introducing HTML5”**, do qual ele é coautor com Bruce Lawson. Posteriormente, o Polyfill se estabeleceu como a designação oficial para esses componentes de código.

## Quais são os tipos de polyfills existentes?

O fato de o termo polyfill estar intimamente associado ao **HTML5** não é coincidência. Com seus recursos avançados que tornaram, entre outras coisas, a necessidade de vídeos em flash *passé*, a quinta versão da linguagem de marcação de hipertexto tornou-se um recurso permanente da Web. No entanto, o suporte ao HTML5 nos navegadores tem se desenvolvido de forma bastante lenta. Além dos polyfills criados para elementos HTML5, **os blocos de código polyfill** também são usados para integrar os seguintes elementos da Web:

- **Gráficos SVG**: O formato [SVG](https://www.ionos.com/digitalguide/websites/website-creation/svg-format-how-to-embed-svg-vector-graphics/) SVG (**S**calable **V**ector **G**raphics), que o consórcio W3C começou a recomendar como o formato padrão para gráficos vetoriais em 2001, ganhou força com o HTML5. Porém, como muitos navegadores ainda não oferecem suporte a esse formato, existem polyfills de SVG, como [svgweb](https://code.google.com/archive/p/svgweb/ "Google Code Archive: svgweb polyfill").
- **ECMAScript**: o ECMAScript é o núcleo padronizado do JavaScript e é atualizado regularmente para expandir a funcionalidade da linguagem. Recursos como objetos Promise ou funções Symbol são disponibilizados em navegadores mais antigos por meio de polyfills, como a biblioteca padrão JavaScript [core-js](https://github.com/zloirock/core-js "JavaScript library core-js Github site").
- **Armazenamento na Web**: Alternativas de cookies como **armazenamento local** (armazenamento de longo prazo no lado do cliente) e **armazenamento de sessão** (armazenamento limitado à sessão atual), conhecidos coletivamente como armazenamento na Web ou armazenamento DOM, não são compatíveis com todas as versões de navegadores. O MIT-licensed [webstorage-polyfill](https://github.com/Macil/webstorage-polyfill "webstorage-polyfill on github.com") é uma solução bem conhecida para esse problema.
- **Cross-Origin Resource Sharing (CORS)**: [CORS](https://www.ionos.com/digitalguide/websites/web-development/cross-origin-resource-sharing/) permite que os aplicativos da Web acessem recursos da Web localizados fora do próprio servidor. Muitos navegadores mais antigos não oferecem suporte a essa troca de dados. O pacote JavaScript [XDomain](https://github.com/jpillora/xdomain "github.com: XDomain-Projekt") e o CORS polyfill [XHook](https://github.com/jpillora/xhook "GitHub Index of the CORS XHook polyfill") podem ajudar a resolver esse problema.
- **CSS (Cascading Style Sheets)**: Há anos, o CSS tem sido uma das ferramentas mais importantes para projetar o layout visual de sites. Com o tempo, as folhas de estilo se tornaram mais versáteis, tornando os polyfills populares para a interface com navegadores mais antigos. Uma das ferramentas mais conhecidas é [css-polyfills.js](https://philschatz.com/css-polyfills.js/ "css-polyfills.js on philschatz.com").
- **Geolocation**: Por muito tempo, a API de geolocalização (usada para transmitir a localização de um usuário) não era compatível com os navegadores e só podia ser usada com a ajuda de um plug-in de navegador adicional. Com um polyfill, é possível fornecer essa funcionalidade aos usuários com versões mais antigas de navegadores que não suportam nativamente a API.

Nota Para simplificar e otimizar o uso de polyfills, serviços como o projeto Polyfill.io usam [redes de fornecimento de conteúdo](https://www.ionos.com/digitalguide/hosting/technical-matters/what-is-a-cdn-content-delivery-network/) (CDNs) para fornecer os scripts. No entanto, desde o início de 2024, houve problemas significativos com a distribuição de malware por meio das CDNs usadas pelo Polyfill.io. Se você estiver usando esse serviço, deverá remover do seu site qualquer código do projeto Polyfill.io.

## Como os polyfills são usados? (Exemplos de código incluídos)

Você pode incorporar diretamente o código JavaScript do polyfill ou os scripts do polyfill no documento HTML de um site. Esses **scripts se integram perfeitamente ao código-fonte existente** e são executados somente se o navegador não for compatível com o recurso específico da Web. Normalmente, isso é feito usando a declaração do JavaScript para verificar a falta de suporte. A falta de suporte pode então ser transformada em uma condição para ativar o script. Nos dois exemplos a seguir, ilustraremos como implementar isso e mostraremos como é a estrutura geral de um polyfill.

### Exemplo 1: Polyfill para o método JavaScript `startsWith()`

```javascript
if (!String.prototype.startsWith) {
    String.prototype.startsWith = function (searchString, position) {
        position = position || 0;
        return this.indexOf(searchString, position) === position;
    };
}
```

Esse pequeno trecho de JavaScript permite que o navegador de chamada use o método startsWith() , mesmo que não seja compatível com ele nativamente. Esse método, que faz parte da especificação ECMAScript 6, verifica se uma **string começa com o caractere ou a série de caracteres de outra string**. Se isso acontecer, ele retornará “true” (verdadeiro), caso contrário, retornará “false” (falso). Você pode encontrar uma versão mais complexa e otimizada para integrar startsWith() na [página do GitHub do desenvolvedor Mathias Bynens](https://github.com/mathiasbynens/String.prototype.startsWith "GitHub-page: mathiasbynens").

Nota O código apresentado aqui não funcionará se o cliente da Web bloquear o JavaScript ou tiver a linguagem de script desativada em suas configurações.

### Exemplo 2: polyfill de armazenamento na Web

Esse polyfill JavaScript é uma solução de codificação simples que torna o armazenamento local e de sessão disponível em modelos de navegadores mais antigos.

```javascript
if (typeof window.localStorage === 'undefined' || typeof window.sessionStorage === 'undefined') {
    (function () {
        var data = {};
        var Storage = function (type) {
            function setData() {
                // Implement the logic to set data into storage
                var storageData = JSON.stringify(data);
                document.cookie = type + '=' + storageData + ';path=/';
            }
            function clearData() {
                data = {};
                setData();
            }
            return {
                length: 0,
                clear: function () {
                    clearData();
                    this.length = 0;
                },
                getItem: function (key) {
                    return data[key] === undefined ? null : data[key];
                },
                key: function (i) {
                    var ctr = 0;
                    for (var k in data) {
                        if (ctr == i) return k;
                        ctr++;
                    }
                    return null;
                },
                removeItem: function (key) {
                    delete data[key];
                    this.length--;
                    setData();
                },
                setItem: function (key, value) {
                    data[key] = value + '';
                    this.length++;
                    setData();
                }
            };
        };
        // Set the local and session storage properties inside the window object
        if (typeof window.localStorage === 'undefined') window.localStorage = new Storage('local');
        if (typeof window.sessionStorage === 'undefined') window.sessionStorage = new Storage('session');
    })();
}
```

O código fornecido acima é um **I**mmediately **I**nvoked **F**unction **E**xpression (IIFE). Antes de o navegador carregá-lo, no entanto, um comando na primeira linha de código verifica se o cliente suporta nativamente as tecnologias de armazenamento na Web. Em caso afirmativo, a instrução retornará um valor falso, pois os tipos de armazenamento local e de sessão já estão definidos. Isso faz com que o polyfill seja descartado.


This is a markdown version of: [https://www.ionos.com/pt-br/digitalguide/sites-de-internet/desenvolvimento-web/polyfill/](https://www.ionos.com/pt-br/digitalguide/sites-de-internet/desenvolvimento-web/polyfill/) for AI/LLM consumption.