Como prometido no post anterior (sem nenhum sucesso porém com dois comentários) colocarei muitos dos truques que aprendi com o site da Gafisa para corrigir este “pequeno” bug do ie6 com PNG24.
Explicarei algumas soluções, com seus prós e contras, e deixo por vocês a melhor escolha, pois eu não tenho nenhuma para indicar… alias, tenho sim! Vamos nos unir e acabar com o ie6 da máquina de todos os usuários que ainda insistem em usá-lo!!!
Microsoft AlphaImageLoader Filter
Como primeira, e única opção (vocês verão porque), existe um filtro que foi criado pela Microsoft para corrigir este bug.
Ele consiste basicamente em retirar o background que já foi aplicado no CSS e inserir a imagem novamente através um seletor que funciona apenas do ie6 pra baixo e do comando do filtro (explicação completa sobre hacks e a parte de seletores consultem http://www.maujor.com/tutorial/hacks-css.php ), como podemos ver no exemplo abaixo:
*html #exemplo {
background:none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='_img/exemplo.png');
}
Agora a explicação do que funciona e o que simplesmente é impossível de se fazer com este filtro.
Possível
A Microsoft disponibiliza para este filtro duas opções de recorte da imagem, através da propriedade sizingMethod que aceita os valores:
- crop – recorta a imagem exatamente do tamanho original, independente do tamanho do elemento que aonde ele está.
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='_img/exemplo.png', sizingMethod='crop');}
- scale – estica a imagem horizontal e verticalmente para caber no tamanho do elemento.
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='_img/exemplo.png', sizingMethod='scale');}
Por costume eu sempre utilizo a propriedade crop, para ter certeza que a imagem não terá nenhuma distorção, porém quando preciso criar um repeat da imagem utilizo o método scale, que gera o mesmo efeito.
Impossível
Apesar de parecer muito bacana este filtro ele tem grandes limitações. Você se lembra que eu disse que ele retira o background e aplica o filtro né? Então, como ele faz essa substituição do background pelo filtro todas as definições como background-position e background-repeat não funcionam. Por isso fica impossível posicionar uma imagem com filtro no bottom de um elemento, pois o filtro tem como padrão o left top. Existe como corrigir ou fazer uma gambiarra para isso? Sim existe! Mas não é nada bonito.
Durante o desenvolvimento de um dos sites que participei todas os modais tinham bordas arredondadas e uma sombra para dar a impressão que estavam flutuando sobre o site, e para fazer um HTML correto não utilizei a famosa <div class=”bottom”> e por conta desta teimosia perdi algumas horas com meu querido amigo Sandro Salles procurando uma solução. Esta solução consiste em pegar a imagem que faz o fechamento do Box e aumentar a sua altura com um fundo transparente sem repetir a imagem. Com isso podemos utilizar o sizingMethod=’scale’ que o filtro colocará a imagem esticada fazendo o fechamento. Dependendo do tamanho do Box ou se ele é expansível podemos ter uma distorção na imagem, porém é a melhor solução que eu já encontrei até hoje.
Além do problema com o posicionamento o Microsoft AlphaImageLoader Filter trás um outro problema sério. Quando ele retira o background e aplica o filtro nota-se que todos os elementos que estão dentro dele perdem o click e deixam de ser selecionáveis. Mas como tudo no mundo do CSS tem solução (e mais uma vez Sr. Sandro Salles estava lá para ajudar) conseguimos encontrar a combinação perfeita para que tudo volte ao normal.
Para este bug basta seguir a seguinte receita:
- Elemento pai: elemento aonde é substituído o background pelo filtro deve ter a propriedade position:static
- Elemento(s) filho(s): tudo o que está dentro ou o elemento que engloba todo o conteúdo do objeto que recebeu o filtro, deve ter declarado no CSS position:relative
<div>
<span>
<p>
Por favor preencha todos os campos corretamente
<a href="javascript:void(0)" title="fechar">Fechar</a>
</p>
</span>
</div>
<style>
div {
position:absolute;
top:60px;
left:40%;
}
span {
position:static;
width:200px;
height:40px;
padding:30px 40px;
background:img/exemplo.png;
}
*html span {
background:none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='img/exemplo.png');}
}
p {
position:relative;
}
</style>
Esta combinação mágica é infalível, e foi testada e re-testada diversas vezes, por isso, podem confiar (exemplo disso é o site da Gafisa).
PNG Behavior HTC
Como eu já disse anteriormente só existe uma solução para o PNG24 no i6, scripts e behaviors são baseados no Microsoft AlphaImageLoader Filter, e este exemplo não foge a regra. Existem muitos sites que disponibilizam este behavior na extensão .htc que fazem exatamente a mesma coisa, porém tem dois grandes diferenciais com relação ao da Microsoft.
A primeira delas é a quantidade de código que precisa ser escrita, para fazer uma chamada em um objeto que precisa do filtro aplicado no CSS basta declarar behavior: url(”pngbehavior.htc”); contra aquele código gigante que eu já coloquei a cima. Isso em um grande projeto pode fazer toda a diferença na quantidade de KB que vai pesar o seu CSS (acreditem! Até a quantidade de ; no CSS faz diferença).
Outra vantagem deste behavior é poder aplicá-lo a uma imagem colocada no código via <img src=””>, algo que não conseguimos com o Microsoft AlphaImageLoader Filter pois só aplicamos a elementos do CSS. Uma maneira fácil de aplicar o behavior a todas as imagens do site sem ter que ficar fazendo marcações especificas é através da declaração a baixo:
img { behavior: url(”pngbehavior.htc”); }
Visto por estes dois pontos a utilização do behavior é maravilhosa, mas como nada é perfeito temos um grande porém. O behavior geralmente utiliza o sizingMethod = scale; para dar uma flexibilidade maior, mas as vezes não queremos que ele tenha o comportamento de scale, então temos que optar, porém existe uma maneira de fazer uma “gambiarra” com o behavior que é duplicar o arquivo e modificar no próprio código as propriedades, salvar com nomes diferentes e aplicar com o crop ou scale quando for mais conveniente.
Outra coisa que o behavior precisa para funcionar é a famosa imagem blank.gif, com 1×1 px transparente, muito utilizada em layouts com tabela para definir os tamanhos de linhas ou colunas quando eram menores do que 10px (se bem me lembro). Esta imagem é utilizada quando o behavior encontra uma imagem inserida no código. Ele faz a substituição do espaço transparente, que no caso do nosso amigo é tratado como cinza, por essa imagem transparente. O contra disso é que o usuário de ie6 quando clica na imagem para salvar só vai conseguir salvar o blank.gif.
Javascripts
Juro que até quase a metade de 2008 nunca havia ouvido falar em javascript que corrigisse o problema de PNG24 no ei6 e fiquei muito animado quando soube, pois acredito muito no “poder” javascript para tratar de diversos problemas, como uma solução que foi desenvolvida e diz que não é necessário usar nenhum tipo de hacks em CSS para o ie6 e faz com que ele interprete corretamente todas as propriedades, mas o script ainda não está 100%, tem algumas falhas, inclusive esta do PNG24, por isso não vou colocar ela na minha lista.
Mas vamos aos scripts comentados. Fiz alguns testes para saber a qualidade e eficiência, e encontrei alguns pontos falhos, como em todas as outras soluções.
Começando pela solução do TwinHelix fiquei animado pela descrição no site da versão 2.0 Alpha 3 que diz ter sanado o problema do background-position quando o filtro é aplicado. Bem, realmente eles conseguiram corrigir isso, fazendo uma duplicação de div via javascript e colocando a imagem que precisa ficar posicionada com o background-position:bottom dentro de um outro div.
Pois bem, falando assim parece que a solução é perfeita e que eu deveria ter colocado como solução definitiva, mas como nem tudo é perfeito o script tem uma grande falha, que é substituir todos os elementos que recebem o filtro por div, ou seja, no teste que fiz aonde tinha um <h3> com um PNG24 aplicado em seu background ele simplesmente trocou a tag, fazendo com que todas as outras informações de formatação fossem perdidas. Por este “pequeno” detalhe eu simplesmente ignorei esta solução e estou aguardando o lançamento de um outro release que corrija isto, caso eles vejam isso como um problema é claro.
A outra solução que é o ifixpng que utiliza como base o jQuery, que é aonde começam os problemas. Hoje em dia muitos sites utilizam o jQuery por ser uma boa biblioteca de javascript com muitos efeitos, complementos, ter uma boa documentação e compatibilidade com todos os browsers, porém o peso de todos esses scripts carregados no site pode gerar problemas de performance.
Particularmente eu acho desnecessário você colocar uma biblioteca como o jQuery e o complemento do ifixpng apenas para corrigir algumas imagens no site, acho que a solução do Microsoft AlphaImageLoader Filter é bem mais pratica e leve neste caso, mas se você já utiliza jQuery para outras funções no site pode ser bem interessante.
Além do problema do peso desnecessário também existe a questão do background-position que não funciona e também existe a necessidade do elemento estar visível na página para ele aplicar o filtro, como a própria documentação no site explica.
Conclusão
Não vejo saida a não ser convencer todos que o ie6 é um browser obsoleto, mas isso ainda demora um tempo para virar realidade e enquanto isso teremos que nivelar tudo por ele.
Espero que este artigo possa ajudar na hora de decidir por alguma solução e ajudar a não levar tantos tropeços durante o desenvolvimento de um site.
