Apache + PHP + .htc

Salve galera,

Na construção de um site, precisei usar alguns recursos avançados de css3. Dito isso, contarei brevemente minha historinha triste. Eu estava bem belo e feliz construindo o site e testando no firefox (normal), após deixar ele do com a cara que eu queria, como todo bom desenvolvedor, comecei a fazer os testes em resoluções diferentes e com navegadores diferentes. Como era de se esperar, e não é novidade pra ninguém, tentem adivinhar em qual deu incompatibilidade?! Alguém? Se alguém "chutou" Internet Explorer, está redondamente certo.

O efeito que eu estava aplicando é como esse, que podemos gerar no site http://css3pie.com/, para arredondar os cantos de uma div e colocar sombra, dando um efeito bacana.

Como tudo tem uma solução, descobri que tem uma gambiarra um pack de arquivos que adicionamos no servidor para funcionar no nosso amigo IE =)

Mas como nada é tão simples quanto deveria, temos que adicionar uma configuração no nosso servidor Apache, para ele reconhecer a extensão .htc, e ai sim corrigir o bug para o IE.

Primeiro temo que baixar o arquivo em:

http://cloud.github.com/downloads/lojjic/PIE/PIE-1.0beta5.zip

Depois temos que colocar o arquivo PIE.htc dentro da pasta onde temos nossos arquivos css.

O próximo passo é configurar o servidor para reconhecer esse arquivo:

No Slackware edite o arquivo /etc/httpd/mime.types, e adiciona a seguinte linha:

text/x-component .htc

No CentOS, edite o arquivo /etc/apache/conf/httpd.conf

AddType text/x-component .htc


Agora só reinicie o Apache e parta para o abraço!
Para testar, podemos usar o código gerado no site http://css3pie.com/.

Ex.:

 

.cssClass{

border: 1px solid #696;
padding: 60px 0;
text-align: center; width: 200px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
-webkit-box-shadow: #666 0px 2px 3px;
-moz-box-shadow: #666 0px 2px 3px;
box-shadow: #666 0px 2px 3px;
background: #EEFF99;
background: -webkit-gradient(linear, 0 0, 0 bottom, from(#EEFF99), to(#66EE33));
background: -webkit-linear-gradient(#EEFF99, #66EE33);
background: -moz-linear-gradient(#EEFF99, #66EE33);
background: -ms-linear-gradient(#EEFF99, #66EE33);
background: -o-linear-gradient(#EEFF99, #66EE33);
background: linear-gradient(#EEFF99, #66EE33);
-pie-background: linear-gradient(#EEFF99, #66EE33);
behavior: url('PIE.htc');

}

Até a próxima