Por lo visto IE7 soportará transparencias en los png, pero de momento nos tenemos que apañar con IE6 que no los soporta. Es una lástima no poder usar png con transparencias, ya que los gráficos tienen muchos más colores que los gif y nos permiten hacer diseños mucho más elaborados.
A pesar de todo, hay un filtro de IE que permite usar PNG con transparencias. Buscando encontré este hack, PNG behaviour, que usa el filtro para el fondo de una imagen y bahaviour en el css. Como imagen usa un gif transparente. El problema de este sistema es que solo funciona para imágenes inline, además de necesitar el AddType text/x-component .htc en el httpd.config de tu apache o utilizar el htaccess, para que funcione (esta solución truculenta la encontré aquí).
¿Qué se puede hacer para usarlo en el fondo, o propiedad “background” en CSS? El primer sistema que encontré usaba el filtro directamente en el CSS. Es un buen método si no te importa que no valide en CSS, pero como esta es una prioridad para muchos de nosotros la única alternativa es usar javascript.
El siguiente método incluye un javascript que solo lee i.e. al ponerle entre comentarios para ie. También se puede poner crear un css externo para i.e. y comentarlo de la misma manera. Puedes encontrar el javascript aquí.
El javascript es relativamente sencillo. También necesitarás de un gif en blanco de 1px. Tendrás que especificar donde se encuentra en el javascript. Y eso es todo lo que hay que hacer. El javascript sustituye cualquier background que tenga un png.
Solo quedan dos problemas. Uno es que si estas usando rollovers css con png no te funcionaran porque el javascript se ejecuta sobre todos los fondos con png. Intenta usar gif en los rollovers si es posible. Lo segundo es que el javascript se carga después del css asi que en i.e veras el png sin transparencia durante un instante mientras se carga.
Seguramente tendré que usar algún detector de version i.e. para que no use el javascript cuando se use IE7.
Entradas (RSS)
Bueno, lo que comentas ya lo conocía e incluso lo probé en una par de sitios. Pero el fondo del problema está en el concepto mismo que tiene Microsoft de su IE, y que nos obliga a tener que usar “parches” y “apañitos” para hacer mil cosas que se podrían evitar si usasen los estándares como el resto. No me parece muy normal que anuncien el lanzamiento un “nuevo” IE al mercado y que apenas soporte el 50 y tantos por ciento de las reglas CSS·2, cuando el resto de navegadores suportan entre un 90 y un 95 %. Ni pensar quiero en cuando estrenen la CSS·3…
Estoy de acuerdo contigo. La verdad que es penoso. Es como si siguieramos en la época de la guerra de navegadores aún. Recuerdo cuando defendíamos el iexplorer y negamos completamente al Netscape con sus errores. Todo se originó en aquella época, cuando ie sacó su propia manera de hacer las cosas, nadie se quejaba. Fue cuando aparecieron los estándares y otros navegadores como Mozilla y Opera que empezó a verse la realidad de i.e., que se mantenía firme en hacer las cosas a su manera.. es decir, que cambien los demás.
Ponte en su lugar, fueron los primeros en tener algo que funcionaba para la mayoría y sigue siendo el navegador más usado. ¿Por qué tendrían que cambiar ellos? Claro que estaría bien si al menos tuvieran algún soporte para todos los sistemas operativos. ¿Cómo es que Mac aún tiene que usar IE5?
Aún debo de leer más sobre IE7 pero ya veo dos cosas que estan solucionadas con las que me he tenido que ver hoy. Esta de la transparencia del png y otra con los atributos max- y min- (hight o width), del CSS 2.1 que IE6 no soportaba y que el IE7 si lo hará.
Buff, con este panorama anda que no falta aún para que se pueda usar el CSS 3!
Pues ya metida en faena, te gustará echarle un vistazo a ésto:
http://rakaz.nl/item/how_well_do_browsers_support_css_selectors
Es francamente desalentador…
Hola, guapa… si quieres ahorrarte más de uno y más de dos dolores de cabeza en la lucha contra los IE menores al 7 te recomiendo que pruebes esto: http://dean.edwards.name/IE7/. Es una muy completa y muy simpática librería de JS que, en conjunción con los igualmente simpáticos “condicionales para IE” (algo como “<!–[if lt IE 7]>…<![endif]–>” en el HEAD te filtra los IE menores al 7) te permite usar los “remiendos” solo cuando toca, sin cargarte la accesibilidad y/o estandarización. Y no tienes problemas con los hovers (si usas imágenes separadas) ya que solo aplica las fiestas a los PNG a los que les pones un prefijo (”-trans” es el que viene predeterminado). Y hay más: box-model, esquinas redondeadas, posicionamiento fijo… échale un ojo
Te mostraría un par de sitios donde los tenemos funcionando, pero aún no son públicos, lo siento…
A ver cuándo te apareces por la lista
Hola Nicolás!
Muchas gracias por el link. Es una libreria de lujo.
Pues es verdad que ando algo descolgada del grupo de traducción de wordpress. Ya me ire leyendo los posts en la lista, a ver que se cuece.
El otoño, que llega cargado de proyectos!:smile: