Contenido

PNG transparentes fáciles para IE6 con DD_belatedPNG

9 dic

+ 11

Los PNG’s tranparentes en Internet Explorer siempre han sido un incordio, pero cada vez se van desarrollado sistemas más sencillosy sobretodo más cómodos para los desarrolladores, sistemas con los que evitar que tardemos demasiado tiempo en hacer algo que debería hacer el navegador.

Con DD_belatedPNG podemos hacer exactamente esto, perder 2 seg en indicar que elemento queremos hacer transparente y a desarrollar algo interesante.

<!--[if IE 6]>
<script src="DD_belatedPNG.js"></script>
<script>
    DD_belatedPNG.fix('.png_bg'); //EXAMPLE
</script>
<![endif]-->

El script, de tan solo 6,66 kb (3,84kb comprimido) está bajo la licencia MIT y lo podemos descargar directamente desde aqui.

  • Buf, este tema nos ha vuelto locos a casi todos los desarrolladores alguna vez, y hemos pensado más de una vez en la postal de Bill Gates siendo degoyado como María Antonieta. Qué pogas ganas de trabajar y cuántas ganas de hacernos la vida imposible, quiero darle una paliza.

    Bueno, al trapo. ¿Esto funciona con las funciones background-repeat o background-position? Porque todos los truqui trucos para el PNG nunca me han funcionado, y el único que me ha chutado (el plugin para WordPress Wp-UnitPNGfix) funciona con esas funciones, pero ¡vaya! No responde al img:hover =S

    Si pudiese, mandaba esto a la mierda, pero como es para un cliente que tampoco tiene la culpa… Pues tengo que perder el tiempo con estas tonterías, lo peor es que nunca pagarán por el tiempo que han hecho perder a tanta gente, ojalá quiebren por cabritos.

  • Me respondo a mis preguntas: sí xD

  • yo no se uds, pero yo deje de desarrollar para ie6 hace unos meses, y les mando un mensaje por encima que dice “ud tiene un navegador viejo” y un listadito para que se bajen ie7, FF, O, S o C y listo
    al cliente se le acaba las ganas de ver su pagina en ie6 cuando le comentas de los tiempos y costos que implica “romper” la pagina para que funcione
    igualmente buen aporte siempre upede venir algun nostalgico q quiera un desarrollo en ie6 :P

  • Esta es otra muy buena opción para poder arreglar el problema que tiene el odioso IE6, yo también estoy empezando a dejar de desarrollar para IE y en algunas webs también muestro mensajes para que opten por actualizar el navegador o instalar uno mucho mejor.

    Saludos.

  • para ser franco soy de la idea de que si la eprsona usa IE6 solo le voy a dejar la web operacional, pero no me voy a quebrar la cabeza para que se vea exactaamente igual que para el menos malo IE7 o para nuestros queridos FF y Opera

  • @emilio: El problema es que el cliente que te la va a comprar la pruebe con el navegador que usan sus amigos, clientes, conocidos,….

    IE6 por desgracia, aún no es un opción a descargar en la vida laboral…

  • Veo que utiliza el truco del VML, parece interesante ya que no utiliza el filtro AlphaImageLoader.

    Os dejo un enlace muy interesante:

    Por qué según Yahoo no se debe usar AlphaImageLoader y las alternativas.
    Image Optimization, Part 5: AlphaImageLoader

  • Ésta solución que aporto sirve para diseñadores / desarrolladores que trabajen con Photoshop y a la que debo decir que no encuentro ninguna explicación razonable a la misma, aunque ando en ello. Simplemente por divina providencia… funciona. No utilizo javascript ni css.

    Para los que trabajan con Gimp todavía no he encontrado la solución.

    Solución en Photoshop

    Guardar la imagen para web en formato png 8 sin tramado, sin tocar ninguna de las opciones que aparecen al seleccionar ésta opción, excepto la opción Mate, en la cual deberemos incluir el color de fondo que utilizemos en la web. Ésto nos hará un borde de 1 pixel alrededor de nuestra imagen.

    Una vez guardada la imagen la volvemos a abrir y repetimos el proceso anterior, guardar para web… y listo. Ahora sí podemos ver en nuestro navegador la imagen png transparente.

    Estoy preparando un pequeño tutorial para verlo mas claro. Si encuentro algo de tiempo preparo un video. Estoy teminando mi web y el blog no esta operativo todavia.

    Salu2 a todos. Espero que os funcione.

  • hola…

    Edulopez, acabo de comprobar q tu método de photoshop funciona… pero parece haber algún problema con las imágenes si no se coloca mat ( si el fondo de pagina es cambiante y no tienes un color definido, como en el caso de plantillas) las curvas no ‘suavizan’ y se ve como un gif normal… hay alguna opción a esto?

    salu2

  • ¿Alguien lo provó con fondos que se repiten? Porque cuando lo aplico a un div con background repeat IE se cuelga.

Comentar

#

Me reservo el derecho de eliminar y/o modificar los comentarios que contengan lenguaje inapropiado, spam u otras conductas no apropiadas en una comunidad civilizada. Si tu comentario no aparece, puede ser que akismet lo haya capturado, cada día lo reviso y lo coloco en su lugar. Siento las molestias.