Internet Explorer, CSS y fondos PNG transparentes

Tras ver cómo se ve el diseño del blog en Internet Explorer y acordarme de las políticas de los chicos de Redmond en cuanto a compatibilidad con los estándares del W3C me he puesto a sacar el libro de recetas y a resolver el entuerto. Por fortuna sólo era problema de los fondos, la distribución de contenidos se ve bien en Explorer.

El problema con Internet Explorer es que no soporta directamente el formato gráfico PNG con canal alfa de transparencia, que hace que en navegadores de verdad se muestren bonitas transparencias. Sin embargo existen varios trucos para parchear el problema. Para ello hay que recurrir a los filtros de DirectX que se pueden llamar vía CSS. Si pongamos que tenemos por ejemplo un elemento con un fondo con una imagen PNG de la forma siguiente:

[css]

#header {
/** (..) **/
border: 1px solid #0c0c0c;
background-image: url(“/images/headerbck2.png”);
background-repeat: repeat;
/** (..) **/
}[/css]

En Internet Explorer lo que se verá es la imagen con un color grisáceo en vez de la transparencia. La chapuza al canto consiste en hacer lo siguiente en el CSS:

[css]

#header {
background-image: none;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’/images/headerbck2.png’, sizingMethod=’scale’);
}

[/css]

Es importante añadir el sizingMethod=’scale’ porque de lo contrario el elemento se redimensionará al tamaño de la imagen y si ésta es de 1×1 píxeles, como es el caso, desaparecerá el componente que queríamos apañar. Ahora lo que ocurre es que la chapuza sienta mal a otros navegadores. La solución pasa por tener una hoja de estilos CSS únicamente con los arreglos que queramos hacer para Explorer y cargarla después de cargar la hoja de estilos general. Para no andar con complicadas operaciones de lado de servidor, bastará con incluir en la cabecera del documento HTML lo siguiente:

[html]


[/html]

Además, seguramente tendremos diferencias entre Explorer 6.x y Explorer 7.x -aún beta-, podemos ser más selectivos. De esta manera, el fichero ie.css puede contener parches adicionales para el aspecto del sitio para que se vea con el explorador de Microsoft.

Finalmente, para hacer que los PNG se muestren con su canal alfa existe un truco más que es filtrar todas las imágenes PNG del documento. Para usar esta magia lo que hay que hacer es incluir un script en JavaScript y añadir al CSS para Internet Explorer la propiedad de aplicar un filtro basado en una función JavaScript. Con ello, en el fichero HTML hay que añadir la carga del script:

[html]


[/html]

Y para el CSS:

[css]

img {
filter:expression(addPngImage(this));
}

[/css]

La función addPngImage se define en el script ie.js.

Todo esto tiene un coste: todos los elementos transformados se van a poner por delante, lo que se traduce en que los enlaces que estén contenidos dentro de estos elementos se van a perder. Lo que toca entonces es ponerse a jugar con la propiedad de CSS z-index. Los enlaces y sus contenedores deben tener siempre un z-index mayor que los objetos transformados. Y no siempre es posible resolverlo. No obstante, con poco esfuerzo se logra tener un aspecto decente es Explorer sin sacrificar por ello todas las posibilidades del CSS. Un ejemplo completo lo tenéis en la portada de este mismo sitio web. El código de estilo correspondiente lo podéis ver aquí y los scripts en JavaScript aquí.

La solución propuesta la he logrado a partir de la información contenida en:

Esta chapuza hace que más o menos se vea todo medianamente bien en el Internet Explorer, aunque he tenido que sacrificar el fondo transparente tan chulo que sale con el resto de navegadores. La solución: cambia a otro navegador civilizado.

5 thoughts on Internet Explorer, CSS y fondos PNG transparentes

  1. ¡Aaaaah, Judas! Pones el “Too Cool for IE” ahí arriba y luego vas y apañas el CSS para que se vea bien en el Navegador del Diablo. ¡Mozilla escupiría sobre tu tumba!

  2. Admito padre mi pecado, haber violado Il Codice, pero es que se veía un poco mal por el puto nulo soporte de PNG que da IE y lo hacía por aquellos que todavía no han visto la luz. No obstante, en IE sigue sin verse como debería verse y no pienso hacer nada más por ello.
    Lo divertido de todo esto es que bueno, esto es un sitio personal y hago lo que más o menos quiero, pero cuando te toca tragar para algo que te mandan hacer, pues uno hace de tripas corazón y desempolva el recetario para que el IE muestre las cosas ande deben.

  3. pero cuando te toca tragar para algo que te mandan hacer, pues uno hace de tripas corazón y desempolva el recetario para que el IE muestre las cosas ande deben.

    coincido con vos.
    gracias por la data capo.

  4. te apoyo, di con tu sitio buscando una solucion a un bug de IE, extrañamente asi como de la nada fallo asi de la nada volvio a trabajar :S…. ojala no solo lo descontinuen sino tambien lo prohiban

  5. Hola, he dado con tu blog pq estoy un tanto desesperado con el diseño de una paginita que etoy haciendo. Como bien explicas en tu introduccion, la paginita en cuestion esta quedandome medianamente decente (en Firefox). Pero cuando despues de un par de dias trabajando la he chequeado en IE 7 y cual ha sido mi sorpresa que no esta nada en su sitio….

    A ver si me puedes dar algun cosejito de como meterle mano al asunto, pq por mas q cambio las coordenadas de los DIV….es como si no cambiara na

    un saludo y enhorabuena por tu blog!

Deja un comentario