PNG Fix para IE 6

16 Abr 2009

Mesmo, apoiando totalmente a morte do IE 6 pros clientes a história é diferente não podemos deixar de testar nossos humildes websites nesse maldito browser, até por que ele não quer nem saber, só quer que funcione.

Bom, esses dias estava trabalhando num projeto e um amigo que estavamos trabalhando junto não gostou da idéia de usarmos png com transparência nas imagens por problemas com o IE, eu disse que conhecia uma solução que funcionava, ele ficou meio desconfiado no começo (por já ter testado tanta coisa que não funcionava direito, eu também já testei muita coisa que não funciona) mas depois que testou gostou muito e viu que realmente funcionava.

Bom como ele é uma pessoa que tem um conhecimento muito bom de CSS e não conhecia esse script, acredito que muito mais pessoas como ele não conhece, por isso resolvi divulgar aqui no blog.

A solução é muito simples e eficaz.

<!--[if IE 6]>
<script src="/blog/<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/javascript
/DD_belatedPNG.js" type="text/javascript"></script>
<script>
  /* Exemplo de utilizacao */
  DD_belatedPNG.fix('.png_bg');
</script>
<![endif]-->

Basicamente esse é o código que você vai precisar colocar no seu template entre as tags head.
Nesta linha (DD_belatedPNG.fix('.png_bg');), você coloca todos os elementos do HTML que você quer que seja afetado. Por exemplo onde tá .png_bg, você pode colocar div ou p, então tudo que for div ou paragráfo, o script vai interferir nas imagens para funcionar o truque.

Nesta linha que vou colocar o código abaixo é o caminho para onde arquivo está, no caso eu coloquei o arquivo dentro de uma pasta chamada "javascript" dentro da pasta do meu template.

<script src="/blog/<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/javascript
/DD_belatedPNG.js" type="text/javascript"></script>

O site do desenvolvedor e onde você pode fazer o download do arquivo é este aqui: http://www.dillerdesign.com/experiment/DD_belatedPNG/

Só vale ressaltar que eu encontrei essa dica no blog: http://www.pinceladasdaweb.com.br/blog/ que aliás é um excelente blog para quem gosta de CSS e afins.

Comentários

Alex Novelli escreveu em 07/07/2009 às 05:41:45

Eu também uso este fix pra PNG com transparência no IE6 e realmente foi a solução final. Funciona perfeitamente e é bem fácil de implementar. No meu novo portfólio eu usei ele em algumas imagens: www.alexnovelli.com

Ronildo Costa escreveu em 07/07/2009 às 19:43:48

Fala filhote... é isso ae, esse é o melhor fix pra png que existe.

Bruno Bincoletto escreveu em 27/09/2009 às 05:51:25

Confesso que fiquei desconfiado também, já usei várias soluções e todas elas possuem algum tipo de contra bem pesado, a melhor que conhecia até então era o supersleight, porém ele é uma dor de cabeça quando se trabalha muito com position:relative/absolute; ele da alguns paus e tudo mais, testei esse e apesar de ser meio estranho e mais pesado do que os outros ele funciona perfeitamente e não buga com nada!! Obrigadão, a dica foi de muita utilidade e sem dúvida continuarei utilizando está solução. Já que você me ajudou bastante, vai uma dica bacana pra você postar no blog. http://aciddrop.com/php-speedy/

Sampahio Damaceno escreveu em 10/11/2009 às 01:32:31

Realmente, a ferramenta mais prática. Fiz um script para o Joomla que ele pega os valores em que o script vai atuar através dos parâmetros do template para definir dinamicamente esta utilização. Vai agilizar muita coisa. Obrigado pela dica!

Viana escreveu em 02/10/2010 às 14:29:10

Muito bom, isso aqui tem que ser mais divulgado, demorei pra achar um que realmente funcionasse e ainda com essa opção de escolher qual seletor será atingido podendo atingir background, que os plugins que tem de cara no google, são mto limitados. Muito bom mesmo. Valeu irmão, ta de nota 10 pela iniciativa!