CSS3 Pie: CSS3 en Internet Explorer 6, 7 y 8

CSS3 viene con interesantes características: esquinas redondeadas, sombras, gradientes y más. CSS3 promete hacer todo esto. Sin embargo, como todos sabemos, la falta de soporte de Internet Explorer limita el uso de estas nuevas características. Ante este problema, surge CSS3 Pie...

CSS3 Pie es un comportamiento adjunto a IE, el cual, cuando es aplicado a un elemento, permite a IE reconocer y mostrar el número de propiedades CSS3. Por ejemplo, si tenemos el siguiente CSS:

#myElement {
    background: #EEE;
    padding: 2em;
    -moz-border-radius: 1em;
    -webkit-border-radius: 1em;
    border-radius: 1em;
}

El resultado será una caja con unas ligeras esquinas redondeadas en casi todos los navegadores modernos, excepto, por supuesto, Internet Explorer 6, 7 y 8, el cual mostrará una caja con esquinas cuadradas. Sin embargo, si añadimos la siguiente regla al final del CSS:

#myElement {
    ...
    behavior: url(PIE.htc);
}

Ahora observaremos el mismo efecto de esquinas redondeadas en IE. Pero eso no es todo. Podemos realizar el mismo procedimiento para dar soporte a otras características de CSS3:

• border-radius
• box-shadow
• border-image
• multiple background images
• linear-gradient as background image

El archivo PIE.htc lo podemos descargar desde el siguiente enlace.

Descargar | PIE.htc
Demo | CSS3 Pie