Como integrar css3 en internet explorer 7 y 8

Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedIn

CSS3 es el presente y el futuro en lo que a maquetación de páginas web se refiere, tanto por la posibilidad de crear efectos antes solo posibles mediante imágenes (sombreados, bordes redondeados, degradados…) como por los nuevos selectores, pero…que pasa con el pasado?? con los usuarios y clientes que aún navegan con navegadores desfasados como internet explorer 7 y 8?? le mostramos la web sin estilos CSS3 ???

Una solución sencilla para este tipo de problemas es PIE. Se trata de un archivo .htc , que al aplicarse a un elemento,  mediante css, permite a IE  reconocer y visualizar las propiedades de CSS3 más utilizadas.

Para poder utilizarlo solamente hay que seguir los siguientes pasos:

1. Descargar

Puedes descargarlo desde su página web. Muy bien documentada, demos, ejemplos…

2. Subir al servidor

Tenemos que subir el archivo PIE.htc a nuestro servidor, es recomendable tenerlo en la carpeta raíz.

3. Aplicar PIE en CSS

Hay que añadir la siguiente regla allí donde utilice una de las reglas de CSS3. Esta ruta es relativa al archivo HTML que se está viendo, no del archivo CSS.


1
behavior: url(PIE.htc);

PIE actualmente incluye soporte a IE 6 a 8 para las siguientes características de CSS3:

border-radius:


1
 .redondeado{ border-radius:400px; behavior: url(/PIE.htc); }

box-shadow:


1
 .sombra-caja{ box-shadow:5px 5px 5px #777; behavior: url(/PIE.htc); }

linear-gradient como imagen de fondo:


1
 .degradado{ background-image: linear-gradient(bottom, rgb(255,255,255) 18%, rgb(231,153,37) 55%); background-image: -o-linear-gradient(bottom, rgb(255,255,255) 18%, rgb(231,153,37) 55%); background-image: -moz-linear-gradient(bottom, rgb(255,255,255) 18%, rgb(231,153,37) 55%); background-image: -webkit-linear-gradient(bottom, rgb(255,255,255) 18%, rgb(231,153,37) 55%); background-image: -ms-linear-gradient(bottom, rgb(255,255,255) 18%, rgb(231,153,37) 55%); background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0.18, rgb(255,255,255)), color-stop(0.55, rgb(231,153,37))); }

múltiples imágenes de fondo:


1
 .fondos{ background:url(images/super-mario.png) no-repeat left center, url(images/cielo.jpg) no-repeat right center; -moz-background:url(images/super-mario.png) no-repeat left center, url(images/cielo.jpg) no-repeat right center; -webkit-background:url(images/super-mario.png) no-repeat left center, url(images/cielo.jpg) no-repeat right center; -pie-background:url(images/super-mario.png) no-repeat right center, url(images/cielo.jpg) no-repeat right center; behavior:url(PIE.htc); }

PIE Css3 funciona correctamente, pero hay que asegurarse de que tu servidor reconoce los archivos .htc como text/x-component.
Lo único que tienes que hacer es copiar y pegar el siguiente código en tu archivo .htaccsess


1
AddType text/x-component .htc

Otro problema que puede surgir es querer hacer funcionar PIE.htc sobre nuestra página hecha en wordpress, la solución es sencilla aunque no completa (no soporta degradados ni background multiple). Además del archivo .htc también hay que subir el archivo PIE.php al directorio raíz del servidor, dicho archivo lo puedes encontrar junto al .htc en el .zip que hemos descargado.

A la hora de llamar a PIE desde la css, cambiaremos el archivo al que llamamos:


1
behavior: url(/PIE.php);

Existen más opciones que añaden soluciones que css3 PIE no nos aporta y que es interesante conocer:

Filter

La solución que nos presenta IE para realizar degradados.


1
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#E79925', endColorstr='#ffffff');

Selectivizr

Es una librería JavaScript que implementa los selectores CSS3.

Ecsstender

Modular y bien documentado, algunas extensiones disponibles incluyen @ font-face, selectores CSS3, fondos multiples y bordes redondeados.

ie-css3

Lo más destacables de ie-css3 es que tiene soporte para text-shadow, PIE todavía no.

cssSandpaper

Si desea utilizar CSS3 transformaciones 2D (rotar, escalar, etc) en IE es la elección.

Títulado Superior en Gráfica publicitaria en la Escuela de Artes de Alicante, hace años que me dedico al desarrollo web. Project manager en Dinamiclab, me he especializado en los nuevos lenguajes HTML5&CSS3 y en wordpress. Además soy un apasionado de los motion graphics y, gracias a HTML5 y CSS3, intento aplicarlo a la web.

Comentarios arrow Un Comentario
  1. Buenas tardes, estoy tratando de incorporar correctamente este código a mi web y no funciona, no se por que ¿puede ser porque uso Prestashop y funciona de alguna forma que no permite los htc?. ¿De que forma consigo que se vean bien los box-shadow y los border-radius en el IE8?. ¿Existe algun script javascript que haga esto?,

    Un saludo.

Escribe un comentario

Tu e-mail no será publicado. Los campos marcados con un asterisco son obligatorios.