martes, 24 de agosto de 2010

CSS3: Solucion para Internet Explorer (Encaminando a un monstruo necio y osboleto)


Microsoft continúa (y continuará) con su politica despreciable de no adaptarse a los estandares cuando les conviene y dejar varado tu navegador en versiones obsoletas de su navegador.

Afortunadamente hay desarrolladores que tratan (a veces con buenos resultados) de sobreponerse a este elefante muerto de microsoft con herramientas efectivas, gratuitas y faciles de implementar.
En CSS3PIE desarrollaron un archivo .htc que, al agregarlo en tu página web conseguiras que los "casi standares" de css3 se apliquen en todas las versiones de explorer (al menos IE6, IE7 e IE8).

Los archivos .htc son componentes para que internet explorer sanee los problemas que tiene con html dinámico.

PIE.htc puntualmente es un conjunto de scripts que convierten las expresiones de CSS3 de tu página a VML (Vector Markup Language): Un lenguage para dibujar vectores, bastante pedorro, desarollado por y para IE.

A continuación te muestro como utilizar este componente

Supongamos que querés redondear los bordes superiores de un DIV.
Entonces crearás un estilo como éste:

#divID{
-moz-border-radius:0 10px 0 0; /*Firefox*/ -webkit-border:0 10px 0 0 ; /*Safari - Chrome*/ border-radius:0 10px 0 0; /*Generico + IE con PIE*/
}

Vamos a convertir este estilo en compatible para IE6, IE7 e IE8:

1) Primero debes descargarte la última versión del componente PIE.htc.
2) El .zip que te descargues tiene 3 archivos: "PIE.htc", "PIE.php" y "PIE_uncompressed.htc". Poné el archivo "PIE.htc" en el directorio raíz de tu página web (o en cada directorio donde vayas a utilizar estilos css3).
3) Agregá la siguiente línea a tu estilo CSS:

#divID{
-moz-border-radius:10px 10px 0 0; /* Para firefox */
-webkit-border:10px 10px 0 0 ; /* Para Safari - Chrome */
        border-radius:10px 10px 0 0; /* Este es el standard */
behavior: url(PIE.htc); /*comportamiento para IE*/
}
4) Refrescá tu navegador y disfrutá de ver una solución en tu inoperante y mezquino Internet Explorer.

No sólo podes redondear los bordes, también soporta Sombreados (box-shadow) y muchas otras funcionalidades CSS3

La verdad es que no tengo ningún interes en particular con la gente de CSS3PIE. Pero probé otras opciones (siempre en componentes .htc) y ninguno se comportó tan bien como éste. Además dá la impresión de que este archivo se va actualizando con regularidad.

------------
Nota: Si este artículo te sirvió te invito a pasar por los enlaces patrocinados que, seguramente, tendrán un montón más de información útil para vos.
Saludos!


No hay comentarios:

El portal que comparte sus ingresos