Acceder al contenido principal

Blog

Volver a Blog

Compatibilidad de propiedades CSS3 con Internet Explorer 6 al 9

25 Jul 015
Avatar David Bojo

Diseño , Navegadores ,

pie css3 - compatibilidad con IE 6-9

En esta ocasión os queremos comentar cómo solucionar problemas de compatibilidad con IE anterior a la versión 10, es decir, las versiones del 6 al 9, para que podamos utilizar algunas de las propiedades principales que nos ofrece css3 en dichos navegadores.

Cuando usamos, por ejemplo, la propiedad border-radius para dar a las esquinas de una caja un estilo redondeado, nos encontramos que queda de maravilla hasta que abrimos la página en IE8 o anterior, que hace caso omiso de dicha propiedad porque no la reconoce y evidentemente nos pinta las esquinas cuadradas. Al igual que border-radius nos pasaría si usamos otras propiedades css3 como sombras o degradados, por ejemplo.

Pero podemos solucionar este problema de incompatibilidad de una forma sencilla, rápida y sin complicaciones: usando CSS3 PIE, que mediante un único archivo (solo pesa unos 40Kb) permite a IE reconocer y renderizar dichas propiedades css3.

Los pasos a seguir para poder utilizarlo son los siguientes:

  • PASO 1 - Descargar el archivo de su web oficial:
    Recomendamos que aproveches para revisar en su web la documentación, demos, ejemplos, etc.
  • PASO 2: - Subir el archivo .htc al servidor con nuestra página web:
    Es recomendable que lo tengamos en la carpeta raíz de nuestro proyecto web. (Si probamos en nuestra máquina, en local, no nos funcionará, debe ser en el servidor).
  • PASO 3: - Añadir una línea de código en el css:
    Simplemente tenemos que añadir
    behavior: url(ruta/PIE.htc);
    en los sitios donde tengamos propiedades css3 que queramos que renderice bien IE. Tenemos que tener en cuenta que la ruta debe ser relativa al archivo .html en vez del archivo .css.

Algunos ejemplos:

  • border-radius:
    .esquinas-redondeadas { 
        border-radius: 5px; 
        behavior: url(ruta/PIE.htc);
    }
    
  • box-shadow:
    .sombra { 
        box-shadow: 5px 5px 2px #ccc; 
        behavior: url(ruta/PIE.htc); 
    }
    
  • background (con multiples imágenes): (con esta propiedad además hay que añadir un nuevo background con el prefijo -pie-)
    .fondo { 
        background: url(images/imagen.png) no-repeat left center, 
                    url(images/fondo.jpg) no-repeat right center; 
        -moz-background: url(images/imagen.png) no-repeat left center, 
                         url(images/fondo.jpg) no-repeat right center; 
        -webkit-background: url(images/imagen.png) no-repeat left center, 
                            url(images/fondo.jpg) no-repeat right center; 
        -pie-background: url(images/imagen.png) no-repeat right center, 
                         url(images/fondo.jpg) no-repeat right center; 
        behavior: url(ruta/PIE.htc); 
    }
     

NOTA: Dependiendo de nuestro servidor puede que falle o no, ya que hay servidores que no reconocen los archivos .htc como text/x-component. La solución es simplemente añadir la siguiente línea de código a tu archivo .htaccsess

AddType text/x-component .htc

Comentarios

Añadir nuevo comentario