Uno de los problemas con los que me encontré a la hora de hacer el diseño que ahora mismo estoy usando es el manejo de ficheros PNG trasparentes. Si lo estás viendo desde Firefox o cualquier otro problema no deberías tener ningún problema para visualizarlo, pero esto antes no era asi.
Como no, Internet Explorer (versiones 6 y anteriores) ha tenido una serie de problemas con este tipo de ficheros, mostrandolos de forma fea y sucia, y claro sin trasparencias. Lo cual causaba un aspecto muy poco estético cuando el visitante llegaba con ese navegador.
Para solucionar este problema encontré un montón de posts y de soluciones acerca de como tratar las imagenes PNG en nuestra web.
Introducción
La W3C presentó el 1 de Octubre de 1996 la especificación del formato PNG, un año despues del lanzamiento del primer IE y desde entonces se ha pasado esta especificación por ahi, ahora parece que por fín en la versión 7.0 (10 años despues) se acercan bastante a lo especificado por W3C.
Para solucionar esta tocada de … los chicos de M$ diseñaron un sistema de filtros de imagenes que pasó a forma parte del core del navegador desde la version 4.0, aportando nuevas mejoras y más opciones en versiones superiores.
Uno de estos filtros, es el que nos permite el correcto visionado de los ficheros PNG en Internet Explorer.
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader()1) Mediante Javascript
Una de las formas de las que disponemos de tratar este bug, en IE es el uso de una librería en JS mediante la cual recorre todas las imagenes de la página y les aplica el filtro de imagen que IE (5.5 y superiores) incorpora en su interior.
Como se trata de un javascript no válido (para todos menos IE), tendremos que prestar atención a la forma de invocar el fichero, respetando que el vistante no tiene por que encontrar un error javascript al cargar la página, solo por entrar con otro navegador.
<!--[if lt IE 7.]>
<script defer type="text/javascript" src="pngfix.js"></script>
<![endif]-->De esta forma indicamos que si el navegador es una versión anterior de IE a la 7, incluye este fichero sinó no lo hagas. Para ello es imprescindible disponer del fichero pngfix.js.
2) Mediante CSS
En el metodo 1, tenemos controladas todas las imagenes que hemos insertado en nuestro HTML, pero no las que hemos definido en nuestro CSS. Por ese motivo tenemos que hacer una modificación más, pero esta vez en los ficheros CSS. Este lenguaje es menos exigente a nivel de ejecución por lo tante si no reconoce una sentencia simplemente la salta, no soy partidario de crear CSS no válidas o parcheadas, pero es que gracias a M$ tenemos que hacerlo…
Para ello tendremos que añadir el mismo filtro pero a mano, para ello definiremos las siguientes líneas:
background-image: url(”trasparente.png”)!important;
background-image: none;
filter: none !important;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=’imagen/”trasparente.png’);
Es importante tener en cuenta que el atributo src del filtro progid:DXImageTransform.Microsoft.AlphaImageLoader debe de ser la ruta absoluta con respecto a nuestra página de inicio. En un wordpress, hay que partir desde la raiz del blog.
Estas líneas no son más que un cúmulo de parches para que los navegadores reconozcan lo que deben y hagan su misión de la mejor forma. Por ejemplo, IE no reconoce la sentencia !important por tanto saltará esta línea, en cambio Firefox (por ejemplo) si que la reconoce y la acatará.
Más Información
58 comentarios, 13 referencias
+
#