Fábio Bastos - Desenvolvedor WordPress em BH. Desenvolvimento Front-end e Back-End

Desenvolvedor WordPress, Web Designer e Programador

CSS3 IE – Como fazer os novos efeitos CSS funcionarem no Internet Explorer


Estive trabalhando com vários frameworks que facilitem a real prática de HTML5 e CSS3 no mundo real. E é um problemão ter que ficar fazendo hacks para o Internet Explorer sempre que quiser criar um efeito de sombreamento, bordas arredondadas, gradientes, etc.

css3 no IE - Internet ExplorerA solução que encontrei e que funciona, além de quase não tomar tempo, é o CSS3 PIE (de progressive internet explorer). Com ele, basta inserir um arquivo em um servidor e chamá-lo usando apenas uma linha de código, como se fosse uma propriedade de qualquer elemento CSS. Além de colocar os elementos webkit e moz necessários para os navegadores baseados em Chrome e Mozilla, essa linha de código faz com que tudo funcione também em versões antigas do IE.

Com esta linha de código, você já pode fazer efeitos avançados como bordas arredondadas, gradientes e sombreamento de textos e elementos no seu layout sem se preocupar em ficar recortando imagens no tamanho certo e usando repetições de background.

Como usar o CSS3 PIE

Primeiro você precisa fazer o download do arquivo zipado (caso o link não funcione, acesse o site);

Depois de extrair os arquivos, você encontrará um arquivo chamato PIE.htc. Ele contém o comportamento para o Internet Explorer e é ele que fará tudo funcionar com uma linha de código, como explicado anteriormente;

Faça o upload desse arquivo (PIE.htc) para seu servidor Web colocando-o na mesma pasta que contém o arquivo CSS;

Agora você deve criar um arquivo HTML, no qual testará o elemento com os efeitos, por exemplo, usamos uma DIV com a ID #meuElemento. O CSS para ela deve ser o seguinte:

#meuElemento {
   border: 1px solid #999;
  -webkit-border-radius: 10px;
   -moz-border-radius: 10px;
   border-radius: 10px;
}

No código acima, usamos as propriedades de bordas arredondadas padrão. Agora, para fazer funcionar no IE, basta inserir mais uma linha, que chama o arquivo PIE.htc:

behavior: url(caminho/do/arquivo/PIE.htc);

Portanto, o código final do elemento #meuElemento será:

#meuElemento {
    border: 1px solid #999;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    behavior: url(caminho/do/arquivo/PIE.htc);
}

Pronto, agora abra o arquivo no Internet Explorer e faça o teste. Para saber quais os elementos de CSS3 suportados pelo PIE, acesse esse endereço.

Essa foi a solução mais simples que encontrei para resolver o problema dos efeitos do CSS3 no Internet Explorer. Se você também conhece algum, compartilhe nos comentários desse Blog.


Tags: , ,

8 respostas para “CSS3 IE – Como fazer os novos efeitos CSS funcionarem no Internet Explorer”

  1. Thaise disse:

    No Ie 9 ele funcionou mas quando eu vou testar no Ie 8 e 7 o efeito não funciona.

    Você pode me ajudar???

    O código ficou assim:

    .boxSombra{
    box-shadow: 0 0 .25em #CCC; /* Implementação W3C */
    -moz-box-shadow: 0 0 .25em #CCC; /* Implementação Mozilla */
    -webkit-box-shadow: 0 0 .25em #CCC; /* Implementação para browsers que renderizam via webkit */
    behavior:url(PIE.htc); /* Comportamento adicionado para renderização das propriedades acima no IE 7 e IE 8 */
    }

  2. fabiobastos disse:

    Oi Thaise

    Você testou ele no servidor ou local? Normalmente ele não funciona se você testar o arquivo direto no seu computador. Faça o teste no Apache ou em outro servidor pra ver se continua dando problema.

    Outra coisa importante é você colocar o caminho absoluto do arquivo PIE.htc.

    Geralmente isso já resolve.
    Att

  3. Programador disse:

    Olá. Há uma semana encontrei um artigo falando sobre a solução de css3 para IE via htc, mas, diferentemente do que você sugere aqui, o arquivo era ie-css3.htc. Fiquei contente com a opção, já que eu não pretendia ficar perdendo mais um tempão escrevendo código crossbrowser e ter que usar mais imagens para isso. Mas só hoje pude testar e tive uma surpresa desagradável: ie-css3.htc não surtiu nenhum efeito comigo – usei IE8 no Windows XP SP3, e tb IE9 no windows 7, ambos computador local. Daí, hoje mesmo busquei outras opções com htc e vim parar na sua página. E esse PIE.htc deu certo! Estranho não?
    Ainda não testei no IE7, muito menos no obsoleto IE6. Se houver outras versões superiores a IE9, aí só espero que não ferram com a gente de novo né rss.

  4. Programador disse:

    Continuei testando e tive nova surpresa: Parece que o pie.htc não surte efeito n ocaso de o seu css já estiver usando certas imagens. Pensei nisso porque a correção só não funcionou quando tentei manter toda estilização original, que inclui imagens de background. Se puder me alertar algo a respeito será muito bom.

  5. Programador disse:

    Desculpe pela minha ansiedade. Descobri que se eu gravar o arquivo pie.htc na pasta raiz do site, tudo parece funcionar bem, com sombra nas div’s e imagem de background (fundo). Já o arquivo css eu deixei na pasta dele mesmo (um nível abaixo da raiz). O diretório parece que influencia no resultado. Pelo q vi até agora, não importa se você linkou tudo corretamente, você não pode gravar em qualquer lugar.

  6. Programador disse:

    Outra observação (:-P): A renderização da página com correção htc para ie não ficou igual no chrome e no firefox por exemplo (estes dois foram mais fieis). Notei um espaço extra logo no final da página, abaixo do radapé. Muito estranho (ruim e chato) este Internet Explorer.

  7. fabiobastos disse:

    Olá.
    Também já tive problemas com o Pie.htc dependendo da pasta. No fim, vale ficar testando as formas de chamá-lo no CSS mesmo, até funcionar. Às vezes nem precisa ter o caminho absoluto dele no CSS, mas na maioria, sim.

    Quanto ao “espaço extra” na renderização do IE, talvez seja bom usar algum hack de CSS então, especificamente pra consertar esse erro. Se for esse o caso.

    Obrigado pelos comentários e as dicas.

  8. Paulo disse:

    Eu estou com seguinte problema eu queria utilizar o Pie.htc para o css3 funcionar no IE estou programando o site usando o Codeigniter + Smarty porem não quer funcionar… Quando abro o site no IE não pega os efeitos css3

Deixe uma resposta