Internet Explorer en su versión 6 y anteriores no soporta la transparencia del formato PNG.
Para solucionar este problema existen varias técnicas:
- A través del filtro Directx AlphaImageLoader.
- Con Behaviors.
- El conocido pngfix (con la ayuda de JavaScript).
- Algunas implementaciones pngfix para frameworks de JavaScript, como jquery.pngFix.js
Todas ellas presentan pros y contras. Dependiendo del proyecto puede que venga mejor uno u otro, o que simplemente alguno no funcione por conflictos de JavaScript o misteriosas razones que solo las meigas de IE conocen. Así que la única solución es probar y probar… 🙁
A continuación voy a desarrollar la primera de ellas.
AlphaImageLoader
#logo {
background-image: none;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(
src='http://..../logo.png',
sizingMethod='crop'
);
}
El primero de los pasos es indicar que no hay ningún fondo background-image: none;, a continuación usamos filter y la llamada Directx de Microsoft para cargar imágenes que incorporan factor alfa. En el parámetro src va la ruta absoluta al fichero png.
Conflicto con los enlaces
Con lo dicho anteriormente el PNG es mostrado con transparencia y sin errores, pero los enlaces no realizan el comportamiento adecuado si se encuentran en el interior de un elemento que tenga aplicado el filtro AlphaImageLoader.
Para solucionar este último problema podemos recurrir al siguiente código CSS:
#logo a {
position: relative;
z-index: 1;
}
Cuando se aplica un filtro el elemento tiene una posición estática y esto presenta problemas en los enlaces, por ello se fuerza por medio de CSS a que los enlaces dispongan de una posición relativa y con z-index en una capa inferior.
Solo para Internet Explorer
Otros navegadores modernos (Firefox, Opera, Safari, Chrome) soportan perfectamente el formato PNG y su grado de transparencia, por tanto sería bueno pensar en ofrecer esta técnica únicamente cuando el usuario se encuentra navegando con Internet Explorer. Para lograrlo podemos recurrir a los comentarios condicionales:
<!--[if lt IE 7]><link rel="stylesheet" href="ie6.css" mce_href="ie6.css" type="text/css" media="screen" /><![endif]-->
Mediante este comentario condicional ubicado en el head podemos indicar que solo aquellos navegadores que sean inferiores al Internet Explorer 7 [if lt IE 7] se enlace el fichero de esitlo “ie6.css” que a su vez contiene los códigos comentados para esta técnica.
De esta forma:
- No obligamos a que se interprete código propietario (no estándar) como el filtro AlphaImageLoader por parte de otro navegador que no sea IE6 o inferior.
- El sitio Web será estándar y válido según el W3C – Validator.
- Reducimos el código CSS innecesario para otros navegadores y con ello logramos una mejor optimización.