Blog Web Standards

Soluções para os problemas enfrentados pelos desenvolvedores HTML e CSS no dia-a-dia

Última modificação: 25 agosto 2011

Em desuso. Esse código está ultrapassado em nosso padrão, então evitamos usá-lo.

Procurando alguma boa solução para aplicação de transparência alpha do PNG no Internet Explorer 6?

Diversas soluções já foram apresentadas, desde um script que necessitava de um GIF transparente de 1×1 pixel e era aplicável somente às imagens em tags <img>, além de utilizar a propriedade filter direto no CSS, o que costumamos utilizar, pois temos total controle sobre a aplicação da funcionalidade no IE 6.

Porém, tanto esse script como a aplicação direta no CSS usavam o mesmo recurso (AlphaImageLoader Filter) para simular a transparência no Internet Explorer. Então ambos os casos apresentavam as mesmas limitações.

No caso de elementos que necessitavam de um background com o PNG, não poderíamos usar background-position, background-repeat, etc.; recursos fundamentais para aplicação de fundos via CSS, pois neste caso não se trata de um fundo propriamente dito, pois o IE não o interpreta dessa forma.

Então apresentamos a vocês o DD_belatedPNG, a solução definitiva para uso de PNG 24 bits no Internet Explorer 6!

Para utilizá-lo é bastante simples: basta baixar o script (procure mantê-lo atualizado) e usar a classe “.png_bg” (ou qualquer nome que você definir em seu código) nos elementos nos quais o PNG deve ser utilizado.

O ponto mais interessante é que, além da fácil aplicação dessa solução, o script usa outro método para simular a transparência alpha, ao contrário de tudo o que vinha sendo visto até hoje. Desta forma, poderemos utilizar background-position, background-repeat, cliques em links, elementos de formulário, etc., algo impossível de ser feito no Internet Explorer 6 até então.

Exemplo de aplicação

<!--[if IE 6]>
<script src="DD_belatedPNG.js"></script>
<script>
/* Nomeando a classe que definirá quais elementos terão a correção para PNG */
DD_belatedPNG.fix('.png_bg');
</script>
<![endif]-->

Como vocês podem ver a aplicação é bem simples, mas caso haja alguma dúvida é só comentar 🙂

Update: Download atualizado para a versão 0.8a do script.

1 comentário

Responder
  1. 21 de abril de 2009

    g3 disse:

    O código de exemplo estava com um errinho, mas já foi arrumado.

    Outra informação do que nós fazemos aqui é de incorporar a chamada da função ( DD_belatedPNG.fix(‘.png_bg’); ) no arquivo javascript. Com isso você deixa seu HTML mais limpo.

Escreva seu comentário