PNG Transparente no IE6
Já faz alguns anos que navegadores como o Firefox e Safari tem suporte ao canal alpha das imagens PNG. Ainda com o uso de hacks é possível dar suporte nos navegadores Internet Explorer 5,5 e 6, mas os hacks não são ideais e são muito complicados de usar. Como o IE6 vem dando lugar ao IE7, que por sua vez possuí suporte ao canal alpha-transparent, as imagens transparentes serão cada vez mais usadas em nosso dia-a-dia.
Infelizmente, ainda existem muitos usuários do IE6 pela web que não podemos deixar de fora (39% segundo o site W3Counter), por isso resolvi publicar este artigo para quem quer ter mais liberdade na hora de fazer seu layout web, sem ter que se preocupar com problemas de transparência em browsers antigos como o IE6.
Exemplo
Visitem a página inicial do meu site (www.obvius.com.br) vejam o imagem com o nome ‘majesticskull’ no meio da tela. Pois é, aquela é uma imagem PNG com transparência. Este site é a prova de que realmente funciona, pois se não funcionasse você estaria vendo essa imagem com um fundo cinza escuro (caso use o Internet Explorer 6), deixando a página de entrada do site com uma aparência ridícula.
Solução
Drew McLellan do site 24 Ways criou uma das melhores soluções para o problema do PNG transparente no Internet Explorer, usando comentários condicionais e JavaScript. Faça download do arquivo abaixo para começar:
O arquivo contém uma imagem GIF e dois arquivos JavaScript, que fazem todo o trabalho duro sem você suar a camisa. Extraia o arquivo na raiz do seu site e use o comentário condicional abaixo dentro da sessão head da sua página, informando a localização em seu site (em verde).
Agora é só abrir sua página com qualquer browser ruim e sem suporte aos PNG transparentes (como o Internet Explorer 6) e ver que agora todas suas imagens transparentes funcionam perfeitamente! Sem nenhum hack!
Como você deve ter notado, não dei muitas explicações de como funciona, apenas ensinei a usar o Script. Caso você esteja interessado em saber como Drew McLellan achou a solução, visite esta página no site dele.
Tags: hacks, imagem transparente, png transparente
July 11th, 2008 at 10:41 pm
Olá
Qual comentário adicional usar? (não aparece nada)
Aguardo resposta ansiosamente
[]s
View this Comment in: English Chinese(S) Chinese(T) French Arabic Dutch German Greek Italian Japanese Korean Portuguese Russian Spanish