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.