Si venís siguiendo mis ultimas entradas habrás notado que mencionado varias veces como lograr una aproximación a la hora de ofrecer soporte a Internet Explorer cuando nos toca trabajar con CSS3, como por ejemplo cuando hable de como “Aplicar la propiedad transform Cross Browser” o como aplicar “Esquinas redondeadas en todos los navegadores“.

Como en ocasiones anteriores vamos a necesitar un archivo HTC que en definitiva es lo que permite a que Internet Explorer reconozca algunas de las nuevas implementaciones que trae CSS3.

Pero que propiedades se puede emular de esta forma, puedes que te permites. Por el momento son solo tres:

• border-radius
• border-shadow
• text-shadow

Implementación

Dentro de nuestra hoja de estilo trabajaremos como de costumbre, solo debemos prestar atención a la ultima linea:

.box {
  -moz-border-radius: 15px; /* Firefox */
  -webkit-border-radius: 15px; /* Safari y Chrome */
  border-radius: 15px; /* Opera 10.5+ futuros navegadores y también IE6+ con IE-CSS3 */
 
  -moz-box-shadow: 10px 10px 20px #000; /* Firefox */
  -webkit-box-shadow: 10px 10px 20px #000; /* Safari y Chrome */
  box-shadow: 10px 10px 20px #000; /* Opera 10.5+ futuros navegadores y también IE6+ con IE-CSS3 */
 
  behavior: url(ie-css3.htc); /* Define el comportamiento de los nuevas propiedades para IE*/
}

Como lo podemos observar de esta forma cada elemento con la class box ahora lucirá algunas de las nuevas propiedades cuando se lo visualice en Internet Explorer.

Limitaciones y Problemas

No todo es color de rosa cunado trabajamos con IE. Por el momento hay un problema que surge al aplicar este hack que implica a z-index, por lo que nuestro nuevo elemento puede lucir por encima o por debajo de otros si no se toman los recaudos posibles.

Solo debemos darle a nuestro elemento un z-index mayor a los demás elementos o definir su posición como position: relative o position: absolute

También debemos tener en cuenta que hay ciertas reglas que no se comportan de manera uniforme. Por ejemplo, no podemos definir un border radius individualmente, es decir 5px arriba a la derecha, 20 abajo a la izquierda, etc. Tampoco podemos usar una sombra en box-shadow con un valor en #000 (negro).

Sacando estas limitaciones, creo que es una buena de lograr una mejor aproximación a CSS3, por lo menos hasta que la nueva versión de Internet este disponible.