IEPNGFix

É sabido por todos que até a versão 6, o Internet Explorer não suporta as imagens exportadas como png com transparência alpha. A partir da versão 7, ele passou a suportá-las e o seu uso tornou-se mais comum. Porém, muitos usuários continuam utilizando o IE6 ou até mesmo o IE5.5. Para eles, as imagens transparentes são exibidas com um fundo cinza indesejável.

Pois um neozelandês, chamado Angus Turnbull, resolveu a questão com um javascript super simples de se implementar, o IEPNGFix, utilizando o filtro AlphaImageLoader, nativo do IE desde a versão 5.5. Uma solução parecida, chamada SuperSleight também foi desenvolvida por Drew McLellan, porém ela não funciona com png’s usados como imagem de fundo com posição determinada e/ou que se repetem. A versão 2.0 Alpha 3 do IEPNGFix resolve esse dilema e portanto, é a solução mais completa existente.

Como implementar o IEPNGFix

Primeiro, faça o download do script no site TwinHelix. Em seguida, descompacte o zip e salve os arquivos iepngfix.htc e blank.gif onde achar melhor em seu site.

Abra o arquivo iepngfix.htc no seu editor de textos e insira o caminho para o blank.gif na variável blankImage. É melhor inserir o caminho relativo à raiz do site:

var blankImg = '/caminho/blank.gif';

Agora, adicione a seguinte regra de estilo ao seu arquivo css ou direto na sua página de html:

seletor { behavior: url(caminho/para/iepngfix.htc) }

O seletor deve ser a tag img no caso de imagens normais ou o elemento que vai receber a imagem de fundo, pode ser qualquer tipo, uma div, um p, etc.

E pronto, agora os pngs transparentes de seu site aparecerão corretamente no IE6 e 5.5 também!

No próximo post vou falar sobre fontes personalizadas. Fique ligado!