Internet Explorer : Quedan X elementos

[su_wiloke_sc_company_website]Este artículo quizá es algo técnico para lo que suelo escribir, pero ya que me he topado con este problema recientemente, prefiero documentarlo y compartirlo con todos los que estén interesados o les pase alguna vez.

Cuando se quieren utilizar imagenes con transparencias en diseño Web la mejor solución es el formato PNG, ya que permite una versatilidad impresionante para poder jugar de la misma forma que lo hacemos con capas en Photoshop, aunque estas tengan fading a transparentes.

El problema es el archiconocido y maldito Internet Explorer que nunca ha aprendido la lección de usar los PNG y aparecen cuadrados grises rodeando a las imagenes PNG. A poco que se busque por Google se llega casi siempre a una solución de la empresa TwinHelix llamada IEPngFix, en donde explican que con un archivo .htc y añadiendo una línea en la hoja de estilos se soluciona el problema.

Ciertamente, es muy potente su librería ya que permite usar PNG tanto si son imagenes sueltas, como fondos de capas o de inputs.

Pero tiene un problema. De la forma que ellos proponen, con el siguiente código:

<style type=»text/css»>
img, div { behavior: url(iepngfix.htc) }
</style>

se le está diciendo al Explorer que por cada capa DIV o cada imagen IMG del código, que se aplique la librería .htc descrita.

No se si os habréis dado cuenta que, tras cambiar el diseño del blog, los de Internet Explorer teníais que esperar bastante a que se descargaran elementos. En concreto, en la barra de abajo ponía Quedan X elementos y tenía que hacer más de 500.

Eso pasa porque la suma de todos los DIV e IMG de este diseño son más de 500 y el Explorer pasaba por todos buscando un PNG para arreglarlo con esa librería.

Me di cuenta observando los logs del Apache (del servidor Web), y viendo que el Explorer llamaba más de 500 veces al archivo HTC en cuestión.

He encontrado una solución muy efectiva que, como habréis podido comprobar, ha acelerado notablemente la página en Internet Explorer. Se trata de decirle que exclusivamente use una clase o un nombre elemento específico para aplicar la librería, en mi caso lo he puesto así:

<style type=»text/css»>
.divtrans, #divtrans { behavior: url(iepngfix.htc) }
</style>

De esta forma sólo pasará y aplicará la solución PNG a los elementos con el identificador descrito ( … id=»divtrans» …) o con el nombre de clase descrito ( … class=»divtrans» …), usándose cada uno dependiendo de las necesidades que se tengan en cada momento.

Es una solución sencilla que no explican en la página oficial del producto, y que me he dado cuenta «de chiripa» probando y quitando cosas.

Espero que a alguien más le solucione el problema que yo he sufrido ;)