Haciendo Pruebas - Mis anotaciones

Soporte CSS3 para Internet Explorer 6, 7 y 8

¿Qué es?

IE-CSS3 es un script que provee Internet Explorer el soporte para algunos de los nuevos estilos habilitados en el estándar de CSS3.

¿Cómo funciona?

Si estas viendo esta página utilizando el navegador Internet Explorer, algunos de los elementos han sido reconstruidos por el script en Vector Markup Language (VML), un lenguaje de dibujo vectorial específico para IE. VML soporta cosas que han sido omitidas de la implementación del CSS del IE como bordes redondeados y falta de definición de efectos.

¿Cómo usarlo?

Simplemente añade los estilos CSS como lo harías normalmente, pero debes incluir una nueva línea.

.box {
  -moz-border-radius: 15px; /* Firefox */
  -webkit-border-radius: 15px; /* Safari y Chrome */
  border-radius: 15px; /* Opera 10.5+, navegadores futuros, 
y ahora también Internet Explorer 6+ usando 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+, navegadores futuros e IE6+ 
usando IE-CSS3 */

  behavior: url(ie-css3.htc); /* Esto permite a IE reconocer las llamadas 
a los scripts sobre todos los elementos que 
tienen como atributo de clase 'box' */
}

Cuestiones y Soluciones provicionales

Tu deberías señalar URLs en behavior: url(...) para relacionar el directorio actual como se lo hace en el estilo background-image: url(...) por ejemplo, pero es que es aquí donde Microsoft decidió ignorar los estándares con respecto al lugar del directorio raíz. Así que behavior: url(ie-css3.htc) debería correr correctamente si ie-css3.htc está en el directorio raíz del sitio.

Probablemente tendrás algunos problemillas con el z-index, especialmente si incrustas un elemento habilitado de IE-CSS3 dentro de otro. Para ello hay dos soluciones alternativas simples:

  • Coloca el z-intex del elemento IE-CSS3 a un número más grande que sus elementos circundantes.
  • Asegurate que el elemento IE-CSS3 está posicionado, tal como con position: relative o position: absolute

A veces, un elemento IE-CSS3 se mostrará en una posición ligeramente diferente a la del elemento original, sin tocar. Podría haber varias razones para ello:

  • Has roto las etiquetas en algún lugar de su margen de beneficio, probablemente por encima del elemento IE-CSS3.
  • Estás experimentando algunos errores de IE6 e IE7. Trata de añadir estilos zoom: 1 y/o position: relative para el elemento IE-CSS3 y su precursor inmediato. También deberias intentar remover algunos márgenes en el elemento IE-CSS3 y/o su precursor, usa padding en su lugar.

Estilos y sus estados
Estilo Qué hace Qué no hace
border-radius
  • Establece un radio para todas las esquinas
  • Bordea los elementos

  • Establece un radio para las esquinas individuales por separado
box-shadow
  • Tamaño de desenfoque
  • Compensación

  • Cualquier color que no sea #000
text-shadow
  • Tamaño de desenfoque
  • Compensación
  • Color

  • La sombra se ve un poco diferente de como se ve en FF/Safari/Chrome, no estoy seguro del por qué

Asi por ejemplo tendríamos un diseño como el siguiente (que debería verse de la misma forma en IE como IE):

Este gatito no soporta los bordes cuadrados.