# Webshims Lib: Polyfills de recursos de HTML5 e CSS3

> Conheça Webshims Lib: polyfills completos para HTML5 e CSS3. Biblioteca de fallbacks para recursos modernos em navegadores antigos. Use jQuery!

URL: https://dpw.dev/css/webshims-lib-polyfills-html5-css3/  
Publicado em: 2012-11-19  
Categoria: css  
Tags: performance, planejamento  
Autor: Tárcio Zemel

Os novos recursos e características de HTML5 e CSS3 são realmente incríveis e, sem sombra de dúvidas, vieram para facilitar a vida dos desenvolvedores web e garantir que a qualidade da web, em si, melhore bastante. Mas, enquanto as próprias especificações não estão suficientemente maduras e ainda existe a questão de lidar com navegadores antigos, quem vai usar recursos visuais e/ou APIs modernos e quer garantir suporte total em seu projetos, deve se valer de técnicas para garantir que tudo funcione, inclusive em software sem suporte total ou parcial a essas _features_.

> Artigo baseado em [How to Use the Webshims Polyfill](http://css-tricks.com/how-to-use-the-webshims-polyfill/).

## "Polyfill"?

Em desenvolvimento web, chamamos _polyfill_ scripts que "imitam" _features_ de HTML5 ou CSS3 - isso foi abordado rapidamente no [artigo sobre Modernizr](/css/modernizr-detectar-features-html5-css3/ "Usando Modernizr para detectar features de HTML5 e CSS3"). um polyfill pode ser praticamente qualquer recurso, tal como uma biblioteca JavaScript que adiciona suporte para seletores CSS3 ao versões antigas do do Internet Explorer (ex. [Selectivizr](http://selectivizr.com/)) ou uma solução em Flash para permitir o uso das tags `audio` e `video` (ex. [html5media](https://github.com/etianen/html5media)).

## Webshims Lib

[Webshims Lib](https://github.com/aFarkas/webshim) é um dos mais completos polyfills que existem atualmente. Baseia-se em jQuery e Modernizr. Incluir o script da Webshims Lib habilitará muitas _features_ em toda a gama de navegadores desktop. A Webshims Lib habilita funcionalidades e características de HTML5 e CSS3 como tags semânticas, canvas, web storage, geolocalização, formulários e multimídia. Conforme consta na [página do projeto](https://github.com/aFarkas/webshim), as features são:

- Suporte básico a CSS
- Canvas
- Elementos HTML5 para formulários, como `input[type="range"]`, `input[type="date"]`, `input[type="number"]`, `output`, `input[list]`/`datalist`
- HTML5 `audio`/`video`/`track`
- Elementos interativos summary/details
- JSON (`stringify` e `parse`)
- `localStorage`/`sessionStorage`
- Geolocalização
- Features de ECMAScript 5 / JavaScript 1.8.5

Com suporte a tantas features, isso pode significar um tamanho de download significativo e um tempo de execução longo do script. Mas é aqui que está o "pulo do gato": a Webshims Lib detecta, automaticamente, quais características e funcionalidades o navegador usado no acesso suporta e **carrega apenas o que é necessário** para simular todo o resto!

Dessa forma, pessoas que já utilizam navegadores modernos, como Firefox ou o Chrome, não serão penalizadas. É possível até reduzir a quantidade de features a serem carregadas caso o projeto não faça uso de todas elas (algo bastante normal, diga-se de passagem).

## Como usar a Webshims Lib

A Webshims deve ser usada em associação com jQuery e Modernizr, então, para começar, é preciso incluir os respectivos scripts:

```html
<script src="scripts/jquery-1.8.2.min.js"></script>
<script src="scripts/modernizr-custom.js"></script>
<script src="scripts/webshim/polyfiller.js"></script>
```

Agora é preciso inicializar a Webshims e, se necessário, especificar quais features serão usadas.

```javascript
    // Polyfill para todas as características da Webshims Lib
    $.webshims.polyfill();
```

```javascript
    // Polyfill somente para form e canvas
    $.webshims.polyfill('forms canvas');
```

E é isso! Webshims Lib irá, automaticamente, detectar e fazer polyfill das características ausentes, dependendo do navegador usado no momento.

## Exemplo de uso da Webshims Lib

Vamos a um exemplo usando a tag `video`. Primeiro, vamos criar a página básica sem Webshims ou qualquer outro polyfill.

```html
<!DOCTYPE html>
<html>
<head>
  <title>Video nativo</title>
</head>
<body>
  <video width="480" height="360" controls="controls">
    <source src="Video.mp4" type="video/mp4">
    <source src="Video.webm" type="video/webm">
  </video>
</body>
</html>

```

Navegadores modernos irão exibir o vídeo corretamente, mas as versões 6, 7 e 8 do Internet Explorer, não. Então, acrescentemos ao código-exemplo suporte a `video` usando a Webshims Lib:

```html
<!DOCTYPE html>
<html>
<head>
  <title>Video including polyfill</title>
  <script src="scripts/jquery-1.8.2.min.js"></script>
  <script src="scripts/modernizr-custom.js"></script>
  <script src="scripts/webshim/polyfiller.js"></script>
  <script>
    $.webshims.polyfill('mediaelement');
  </script>
</head>
<body>
  <video width="480" height="360" controls="controls">
    <source src="Video.mp4" type="video/mp4">
    <source src="Video.webm" type="video/webm">
  </video>
</body>
</html>
```

A partir de agora, todos os browsers conseguirão executar esta funcionalidade, incluindo IE6+.

## Conclusão

Como visto no exemplo, é muito simples usar a **Webshims Lib**. Não há necessidade de maiores alterações de códigos nem quem já usa navegadores modernos será onerado por seu uso. Ela permite que todos possam desfrutar dos recursos da web moderna que você queira usar em seus sites/projetos.

Para maiores informações, visite a [página oficial da Webshims Lib](http://afarkas.github.com/webshim/demos/) e aproveite!

---

Fonte: [dpw - desenvolvimento para web](https://dpw.dev/) (pt-BR).
Guia para agentes: https://dpw.dev/llms.txt
Índice completo: https://dpw.dev/sitemap-index.xml
Feed: https://dpw.dev/rss.xml