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:

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:

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

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.

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:

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!