CSS3 en IE con CSS3 Pie – Selectivizr

CSS3 en IE con CSS3 Pie – Selectivizr

Demo Descargar

Aquí veremos algunas técnicas para poder utilizar propiedades css3 en IE como border-radius, background-gradient, box-shadow, multiple background, y el uso de pseudo clases css3 con Selectivizr.

CSS3 PIE

CSS3PIE es un asistente para IE, se extiende al comportamiento de Internet Explorer para reconocer y mostrar las propiedades de CSS3.

Para su uso, debes descargar CSS3PIE, encontraras varios archivos pero solo utilizaremos PIE.htc que vamos a llamar desde nuestro archivo CSS, así que es recomendable que se ubique en la misma carpeta donde se encuentra nuestra hoja de estilo.

Selectivizr

Selectivizr se utiliza para manejar selectores css3, se utiliza en combinación de librerias js como jQuery o Mootools. Se recomienda optar por Mootools ya que admite todos las propiedades de  Selectivizr.

Para este ejemplo se utilizara el siguiente script, debe ser incluido dentro de la etiqueta <head>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/mootools/1.4.0/mootools-yui-compressed.js"></script><!-- Mootools -->
<script type="text/javascript" src="selectivizr.js"></script><!-- Selectivizr -->

Ahora veamos algo de CSS3

Border Radius

Interpretando border-radius en IE con CSS3Pie.

.box{
    border-radius:8px;
    behavior:url(PIE.htc);
}

Box Shadow – RGBA

Para interpretar box-shadow solo debemos incluir el archivo PIE.htc, tambien podemos declarar opacidad a la sombra con la propiedad RGBA.

.shadow{
    box-shadow:0px 2px 2px rgba(62,115,0, 0.75);
    behavior:url(PIE.htc);
}

Background Gradient

.box{
    background: -webkit-linear-gradient(top, #c9ed8a,#72aa31);
    background: -moz-linear-gradient(top, #c9ed8a,#72aa31);
    background: -o-linear-gradient(top, #c9ed8a,#72aa31);
    background: -ms-linear-gradient(top, #c9ed8a,#72aa31);
    background:linear-gradient(top, #c9ed8a,#72aa31);
    -pie-background:linear-gradient(#c9ed8a,#72aa31);
    behavior:url(PIE.htc);
}

Multiple Background

.multiple{
    background:url(pacman.png) no-repeat 20px center, url(twitter.png) no-repeat  60px center, -webkit-linear-gradient(#c9ed8a,#72aa31);
    -pie-background:url(pacman.png) no-repeat 20px center, url(twitter.png) no-repeat  60px center, linear-gradient(#c9ed8a,#72aa31);
    behavior:url(PIE.htc);
}

Selectores CSS3

Ahora usaremos Selectivizr que nos permite agregar pseudo-clases y atributos css3 a navegadores que no lo soportan. Funciona desde IE6.

Solo se debe incluir la librería javascript como se menciono al principio.

.box span:first-child{
    background:#333;
    color:#fff;
}

.box span:nth-child(2n) {
    background: #3de1ff;
}

.box span:last-child{
    background:#fff114;
    color:#333;
}

IE Filter

También podríamos usar filtros de IE (IE filter) para agregar propiedades CSS3. Por ejemplo background-gradient

.box{
    background:#333;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#c9ed8a', endColorstr='#72aa31');  /* IE */
}

Tags: