Luan Garcia » xhtml, css, jquery e webstandards

Como aplicar corretamente este filtro, e qual a melhor maneira de usá-lo.

Como todos já estamos carecas de saber, o nosso querido amigo IE6, não nos dá suporte ao nosso grande aliado png.

Existem algumas formas mais comuns de se faze-lo funcionar no ie6, na sua maioria, por javascript. Porém, este não vai ser meu foco hoje. Vou propor a solução usando apenas css, ou seja, os filtros para ie6.

Muita gente usa, pouca gente consegue fazer funcionar, e muitos não entendem como funciona o mecanismo, mas há pouco tempo eu descobri o porque as vezes a desgraça não funcionava, e a partir daí, meus problemas com png acabaram.

Primeiramente e antes de mais nada, eu aconselho a usar uma condicional apenas para o ie6. Sendo assim, apenas o ie6 vai ler o trecho do codigo que irá conter os filtros de css para fazer com que o png fique transparente. Para quem não sabe, as condicionais são if’s, que determinam qual navegador vai conseguir ler o trecho de código que está dentro.

O código que faz isso acontecer é o seguinte:

<!–[if IE 6]>
<link href="css/comum.css" rel="stylesheet" type="text/css" media="screen" />
<![endif]–>

Ou seja, apenas o IE6 vai interpretar este arquivo de css. O resto dos navegadores vai entender como um comentário simples. Apenas ele precisa interpretar este código que faz com que o png fique transparente, os outros navegadores (IE7+, ff, opera, chrome etc..) ja possuem suporte ao png.

Bom, chega de papo furado vamos ao que interessa.

No css normal, usa-se o backgroun da seguinte forma:

CSS: (css/comum.css)
h1 {background: url(../img/logo.png) no-repeat 0 0;
width: 480px;
height: 110px;}

Obs.: Este filtro não aceita imagem repetida em y ou x (ie6), tem que se usar a imagem inteira.

E no css que apenas o ie6 irá ler:

CSS: (ie6.css)
h1 {background: url(../img/logo.png) !important;
background: none;
filter: none !important;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’img/logo.png‘,sizingMethod=’image’);}

Bom..agora vamos a lógica. Levem em conta minha estrutura de pastas, onde index.html está na raiz e tanto o css quanto as imagens estão em pastas com seus respectivos nomes.

Reparem que o caminho da imagem do background esta diferente do caminho da imagem do filtro. Muitas vezes não funciona porque não sabemos colocar certo o caminho do filtro. É bem simples, na verdade a referência que o filtro usa para chegar até a imagem, é o proprio html (se o html esta na raiz, entao o caminho fica img/logo.png, ao contrário do css que tem que voltar um nível parar acessar a pasta da imagem). Se é do próprio html então ele nao precisa subir um nivel para chegar a imagem (neste caso). Logo, isso é o grande “x” de se usar o filter.

E é isso galera, é bem simples na verdade. Já tomei muita surra por causa disso e acho interessante compartilhar com vocês. Abaixo está o link para fazer o download do meu exemplo e ir acompanhado ao tutorial.

Link do exemplo

Obs.: Não postei o código html pois ocuparia muito espaço, além de não ser o essencial.

Flw galera..abs!