Nothingtodo

El otro día, en uno de los foros en los que participo, un amigo webmaster me pidió que le diera un review a su recién estrenado sitio. Lo encontré bastante bien, le dí algunas sugerencias, y luego por curiosidad me dispuse a navegarlo con Internet Explorer 6 (no, no, yo tengo IE7, pero utilizo el IE6 para validar las maquetaciones ^^) y noté algo que a pesar de que no era nada grave para su diseño pues estéticamente no se veía muy bonito: el logo tenía un fondo como de color verde, y éste no se veía ni en Firefox ni en IE7. Estaba claro: esto era un PNG con transparencia!

Como sabrán existen diferentes formatos de imágenes para uso en la web, entre los que figuran los .jpg, .gif y más recientemente los .png. Los gif gozan aún de gran popularidad debido a que en los comienzos de la web fue uno de los primeros formatos que permitían transparencia, lo cual les hacía ver bastante chévere pues podían fundirse con el fondo de una forma bastante aceptable (no es la mejor, luego les cuento por qué). Sin embargo, con el tiempo fueron desarrollándose nuevas tecnologías lo que le dió paso al PNG, que tiene una impresionante gama de colores, así como por supuesto su muy versátil transparencia que superó incluso a su predecedor GIF.

Tristemente, debo decir que no todo es color de rosa: aún cuando nuevas tecnologías surgieron, y muchos navegadores supieron adaptarse a ella, siempre hay alguien que pone la nota discordante: Microsoft. Por motivos desconocidos, su navegador no maneja muy bien que digamos las transparencias (aunque con el IE7 han avanzado algo, debo reconocerlo), y con las versiones anteriores a la 7 todo se va al traste. Por ejemplo, la imagen a continuación es la del sitio del caso que mencionaba vista con IE7:

... y esta que sigue a continuación es con IE6:

...¿notan el borde rojo que coloqué en las imágenes? Allí podrán observar claramente como en IE7 (y en Firefox) la transparencia del PNG se mantiene, pero no pasa lo mismo con IE6 (y sus versiones anteriores). No voy a iniciar aquí una discusión del por qué de esto, ya creo que todos sabemos la razón, pero sí les voy a mostrar como se puede corregir: Javascript. Aunque no es la única manera, hasta ahora es la forma más efectiva que he encontrado. Comparto el código con ustedes: La página de Bob Osola.

Para utilizarlo, simplemente colóquenlo entre los tags head y body, y es todo. Feliz Navidad!