Transparência em PNG sem javascript
O desenvolvedor web, sempre busca expandir seus limites, propondo novas idéias de espaço, design, tamanho e posição. O que devemos pensar bem antes de sair inovando, é a capacidade de leitura dos navegadores. Para isso existem estudos sobre desenvolvimento Cross-browser.
O Internet Explorer 6(e seus antecessores) por exemplo, além de não ser totalmente compatível com o CSS 2, é incapaz de fazer a renderização da área transparente de uma imagem PNG, deixando o vazio em tonalidade cinza. Sempre que desejamos esse recurso, corremos atrás de hacks de css ou javascripts. A maneira mais utilizada atualmente, é um script chamado PNGFIX, que utiliza filtros do DirectX junto a uma imagem GIF branca de 1×1 pixels, criando um “protótipo” agradável.
É dito “protótipo”, pelo fato de não funcionar em ocasiões de queda de desempenho no servidor, ou então, pelo o usuário não possuir o javascript ativo, sem descartar diversos fatores que influem na incompatibilidade.
Uma boa solução, além de mais precisa, é a utilização do GIF apenas no IE 6, como mostra o exemplo abaixo do Twitter.
Vemos que no primeiro, o logotipo está sendo usado em formato PNG, por estar com uma definição de contorno melhor, comparado ao segundo que está inferior, e definido como GIF. Teste também, salve o logotipo no IE 6 e depois salve nos outros browsers.
Mas como eu faria essa substituição sem javascript?
Não sei no caso doTwitter, mas eu faria essa verificação de browser por alguma linguagem de programação server-side (php, ruby on rails, asp, java e etc), seguindo o seguinte algoritmo:
Variavel browser
browser = Pegue o nome do browser e a versão
Se browser = Internet Explorer 6
escreva gifCaso for outro browser
escreva png
Alguma dúvida ou sugestão, deixe um comentário.
