Webshims Lib: Polyfills de recursos de HTML5 e CSS3

Conheça a Webshims Lib e saiba como ter polyfills de recursos de HTML5 e CSS3 carregados sob demanda!

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.

“Polyfill”?

Em desenvolvimento web, chamamos polyfill scripts que “imitam” features de HTML5 ou CSS3 – isso foi abordado rapidamente no artigo sobre Modernizr. 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) ou uma solução em Flash para permitir o uso das tags audio e video (ex. html5media).

Webshims Lib

Webshims Lib é 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, 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:

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

<script>
    // Polyfill para todas as características da Webshims Lib
    $.webshims.polyfill();
</script>

// Polyfill para todas as características da Webshims Lib

$.webshims.polyfill();

</script>

<script>
    // Polyfill somente para form e canvas
    $.webshims.polyfill('forms canvas');
</script>

// Polyfill somente para form e canvas

$.webshims.polyfill('forms canvas');

</script>

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.

<!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>

<!DOCTYPE html>

<html>

<head>

<title>Video nativo</title>

</head>

<body>

</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:

<!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>

<!DOCTYPE html>

<html>

<head>

<title>Video including polyfill</title>

$.webshims.polyfill('mediaelement');

</script>

</head>

<body>

</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 e aproveite!