Thinking on hiring me?

Please read

Fernando Guillén

a Freelance Web Developer

cabecera decorativa

software development as an artistic expression

Archive for the ‘maquetación’ Category

Jueves, Agosto 14th, 2008

Seudo soporte PNGs transparentes en IE6

Disclaimer: soy desarrollador web pero del lado oscuro: el de la parte servidor y, aunque me toca tocar de todo, el CSS, y el diseño web en general, no son mi especialidad. Así que si ves alguna página de algún maquetador especializado en la que se contradice algo de lo aquí digo hazle caso a él.

La pesadilla del maquetador web tiene nombre y éste es Internet Explorer 6. El Navegador más uebón de todos los navegadores. Y pese a que tiene más de 7 años, que está intentando ganar el récord a software con más agujeros de seguridad y que la versión 7 hace 2 años que está disponible, aún sigue siendo el navegador más usado… después de FireFox ;..)

Una de las mayores cerraduras de esfinter que nos encontramos al probar nuestra flamante web en un IE6 es que éste no soporta PNGs transparentes. :O

Bueno, sí que los muestra, pero en vez de la resultona transparencia aparece un desagradable tonillo gris con transparencia nula.

Existen muchos sitios donde te explican como hacer para que el IE6 soporte los PNGs transparentes.. pero la cruda realidad es que no hay manera, olvídate. Cambia todos los PNGs transparentes por PNGs no transparentes o JPGs o incluso GIFFs, pero no te metas en el lío de intentar conseguir que el IE6 te lea bien los PNGs transparentes..

Lo puedes hacer sólo para el IE6 con el hack de los comentarios condicionales para IE y cargando CSSs específicos para este navegador.

Si después de lo dicho te empecinas en hacerlo, allá tú, y aquí tienes la manera de acercarte lo más posible a conseguirlo.

Existen 2 hacks diferentes que tenemos que usar dependiendo de si el PNG transparente está incluido en la página mediante un <img> o mediante un background-image.

PNG transparente metido en una <img>

Éste es el más fácil y el soporte es casi total. A mi no me ha dado ningún problema.

Es muy fácil porque se utiliza un javascript que han hecho una gente muy simpática llamado pngfix.js.

Es una mala bestia de script en 30 líneas que selecciona todas los elementos <img> que contienen un PNG y los sustituye por elementos <span> con una imagen de fondo que es la misma PNG. Usa para ello el hack del IE6 para PNG en background-image que vemos a hora a continuación.

Para activarlo no hay más que descargarse el pngfix.js y llamarlo desde el HTML con:

<!--[if lt IE 7]>
  <script defer type="text/javascript" src="pngfix.js"></script>
<![endif]-->

Así sólo se activará si el navegador detectado es una versión anterior al IE7.

PNG transparente como background-image

Éste funciona siempre y cuando no queramos usar el background-repeat y/o el background-position. Si queremos usar estos atributos estamos jodidos y volvemos al punto del principio: olvídate.

Es decir sólo funciona en caso de que la imagen de fondo no queramos que se repita o que se coloque en una posición que no sea la 0,0.

El truco, o hack, fué ofrecido por la propia gente de IE6 que, diéndose cuenta de la carencia de su motor de renderizado, rebuscaron y rebuscaron y dieron con una posible solución: usar un filtro propietario llamado AlphaImageLoader que es capaz de cargar PNGs transparentes vía CSS.

Está claro que no vamos a usar este truco (chapuza) en todos los navegadores así que lo que hacemos en un CSS que sobrescriba los valores normales y los sustituya por los que necesita el IE6.

Así que generamos un CSS que sólo lo lea el IE6 y lo cargamos desde el html tal que así:

<!--[if IE 6]>
  <style type="text/css" media="all">@import "/stylesheets/ie6.css"</style>
<![endif]-->

En este CSS vamos a hacer todos los ajuste que el IE6 necesite. Entre ellos el del AlphaImageLoader.

Cogemos todos los elementos CSS que contengan un background-image y ponemos cosas coma ésta en nuestro ie6.css:

.clase_css{
  background-image: none;
  filter: none !important;
  filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="/imgs/imagen.png");
}
#id_css{
  background-image: none;
  filter: none !important;
  filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="/imgs/imagen.png");
}

Y repito: si requieres que la imagen se repita estás perdido, lo máximo que puedes hacer es que la imagen se estire con:

#id_css{
  background-image: none;
  filter: none !important;
  filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="/imgs/imagen.png", sizingMethod="scale" );
}

O si la imagen es más grande que el elemento que la contiene puedes cortarla:

#id_css{
  background-image: none;
  filter: none !important;
  filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="/imgs/imagen.png", sizingMethod="crop" );
}
Los links dejan de funcionar

O cuando parece que hay luz al final del tunel viene otro tren y nos aplasta.

Con el truco del AlphaImageLoader resulta que determinados links dejan de funcionar. También hay <p> que ya no se pueden seleccionar o formularios que no se dejan rellenar.

Ni el problema ni la solución está muy clara pero el workarround que se propone por ahí es buscar los componentes que fallan y ponerles un

position: relative

Con esto se suele arreglar bastantes cosas:

a {
  position: relative;
}

Para las demás deberá ir haciendo pruebas.

Los elementos no se estiran para contener su elementos hijos

Otro tren que pasa es que puede que los divs no crezcan hasta soportar todos los elementos que contienen, en caso de que ocurra esto hay que jugar con:

height: 100%;

y

height: auto !important;

Actualizado:

Parece que hay un script que intenta solucionar todos estos problemas el solito, se llama SuperSleight. Lo he probado pero ya tenía todo el tinglado montado y me funcionaba un poco mejor.

PD: hazte de la campaña SaveTheDevelopers o a la de EndIE6 y activa el script que ofrecen en tus páginas para incitar a que la gente que sigue usando IE6 se actualice .. porfavor¡¡

a Freelance Web Developer is proudly powered by WordPress
Entries (RSS) and Comments (RSS).

Creative Commons License
Fernando Guillen's blog by Fernando Guillen is licensed under a Creative Commons Attribution-NoDerivs 3.0 Unported License.