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!