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.
Escrito por
Sabe como eu faço?
Incluo a imagem por CSS, daí fica fácil aplicar estilos diferentes
para diferentes browsers.
;D
Também, é só por _background: , que por sinal é mais semântico que inserir uma img.
Bem lembrada essa sua questão, mas o exemplo que eu mostro é server-side, e não client-side, ou seja, não dependemos do usuário ter ou não algo habilitado.
Bom para acessibilidade, prejudicial para semântica. hahaha
Abraço
Jovem, é simples fazer isso, basta usar conditional comments, com isso você faz uma folha estilos que só o IE vai ler!!!
Seria um outro método.
Nesse caso não tinha necessidade de eu fazer uma folha só para o IE.
Basta só eu usar _background: apontando para o gif e o background: para o png.
O conditional comments trabalha inicialmente em server-side, mas quando o navegador reconhece o if , e chama o css, o processo passa a ser client-side.
A itenção foi mostrar o trabalho do lado servidor, e não navegador.
Essas questões foram encapsuladas no post:
“Sempre que desejamos esse recurso, corremos atrás de hacks de css ou javascripts.”
Espero que tenham entendido.
Abraços.