Como usar arquivos png transparentes no IE6

Ultimamente, em meu trabalho como webdesigner, tenho conhecido e utilizado alguns recursos e técnicas que ajudam a enriquecer o resultado final, driblando algumas das deficiências e limitações dos browsers (em geral do IE) ou mesmo do próprio CSS. A partir de agora, vou reparti-los com vocês, numa série de posts.

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!

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s