Utilizando CSS3 nas vers�es antigas do Internet Explorer

Hoje um dos maiores empecilhos para os desenvolvedores web s�o as incompatibilidades entre browsers, principalmente o IE (sempre ele!).
As vers�es 6 ,7 e 8 do Internet Explorer n�o s�o capazes de renderizar as propriedades do CSS3, mas n�o desanime!
Existem bibliotecas javascript e hacks que nos permite utilizar algumas propriedades CSS3 nos navegadores citados acima, tais implementaç�es tamb�m s�o renderizadas nos demais navegadores: Firefox, Chrome, Opera e Safari.
Para tal, utilizaremos o PIE CSS3 http://css3pie.com

Propriedades suportadas:

border-radius
box-shadow
border-image
CSS3 Backgrounds (- pie-background)
Gradients
RGBA Color Values
PIE Custom Properties
-pie-watch-ancestors
PNG alpha transparency and -pie-png-fix
Lazy Initialization (-pie-lazy-init)

Bordas Arredondadas
A propriedade para criar bordar arredondadas � o border-radius e atribuir um valor para o arredondamento. Por�m, essa propriedade varia entre browsers.
Veremos agora como utilizar na pr�tica:



#box{
    border-radius: 10px; /* Implementaç�o padr�o W3C */
    -moz-border-radius: 10px; /* Implementaç�o Firefox */
    -webkit-border-radius: 10px; /* ISafari e browsers que renderizam via webkit */
    behavior: url(PIE.htc); /* Bahavior adicionado para renderizaç�o das propriedades acima no IE6, 7 e 8 */
    width: 200px;
    height: 50px;
    background: red;
}

Pronto! A borda ser� renderizada como na imagem abaixo (utilize o programa IE Tester para testar nas diferentes vers�es do IE).

Sombras
A propriedade box-shadow define sombra em um elemento. Requer valores para definir a separaç�o da sombra, esfumaçado, cor.
Por exemplo: box-shadow: 5px -9px 8px #666, onde o primeiro valor define a posiç�o em X, o segundo em Y, depois o valor do �blur� e por �ltimo a cor. Por enquanto o PIE CSS3 n�o aceita usar inset e outset para mudar a sombra para interna ou externa.

 

#boxsombra{
    box-shadow: 5px -9px 8px #666; /* Implementaç�o W3C */
    -moz-box-shadow: 5px 3px 8px #666;  /* Implementaç�o Firefox */
    -webkit-box-shadow:5px 3px 8px #666; ; /* Safari e browsers que renderizam via webkit */
    behavior: url(PIE.htc); /* Bahavior adicionado para renderizaç�o das propriedades acima no IE6, 7 e 8 */
    width: 200px;
    height: 50px;
    background: orange;
}

Linear Gradiente
Define efeito de degrad�, basta inserir a propriedade dentro de background e declarar os devidos valores.
background: linear- gradient(cor1,cor2), em alguns browsers que usam webkit fica assim background: linear-gradient{posiç�o, cor (from), cor(to) porcentagem};



#boxdegrade
{
    background: -webkit-gradient(linear, 0 0, 0 bottom, from(#EEFF99), to(#66EE33));/* Safari e browsers que renderizam via webkit */
    background: -webkit-linear-gradient(#EEFF99, #66EE33);/* Safari e browsers que renderizam via webkit */
    background: -moz-linear-gradient(#EEFF99, #66EE33); /* Implementaç�o Firefox */
    background: -o-linear-gradient(#EEFF99, #66EE33); /* Implementaç�o Opera */
    background: linear-gradient(#EEFF99, #66EE33); /* Implementaç�o padr�o W3C */
    -pie-background: linear-gradient(#EEFF99, #66EE33); /* Propriedade adicionada para renderizaç�o das propriedades no IE7 ou superior */
    width: 200px;
    height: 50px;
    behavior: url(PIE.htc); /* Behavior adicionado para renderizaç�o das propriedades acima no IE6, 7 e 8 */
}

Para mais exemplos visite o site http://css3pie.com
OBS: o arquivo PIE.htc tem que estar no mesmo diret�rio que o arquivo .css

Utilizando CSS3 nas vers�es antigas do Internet Explorer

Nesse tutorial você irá aprender como tornar algumas propriedades CSS3 compatíveis com o Internet Explorer 6,7 e 8.

Artigos relacionados