TECNato – TIC's Perú

El siguiente artículo es escrito gracias al siguiente caso:

En el año 2010 cuando los sitios Web mas populares dejaron de dar soporte a Internet Explorer 6, uno también se olvida fácilmente de darle soporte, aun cuando se trata de algún cliente, pero para la mala suerte este se da cuenta y por mas que se le explique, la ignorancia tecnológica hace que se le de soporte una vez mas.

Y aquí parte de la solución: Las principales características del diseño del sitio Web en cuestión que afectan una buena visualización en Internet Explorer 6, de ahora en adelante IE6, fueron los bordes redondeados y las imágenes transparentes.

Aunque para solucionar los bordes redondeados tanto en IE6 e IE7 muchas veces se emplean imágenes, en este caso se presentaron defectos en IE6, así que la solución fue simplemente eliminar los bordes redondeados ya que no afectaban de sobremanera al diseño.

Las imágenes transparentes para la Web, como se sabe deben estar en el formato PNG, IE6 no soporta esta característica, pero afotunadamente existe un filtro que hace posible la transparencia. Dicho filtro es una regla CSS no estándar creada por Microsoft.

filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(...);

Aplicando esta regla CSS a cada imagen hará que tenga transparencia, sin embargo para facilitarnos las cosas existe un plugin de jQuery (Supersleight), el cual agrega características nuevas y útiles a la hora de manejar las imágenes PNGs:

• Funciona con imágenes en línea e imágenes de fondo.
• Aplica automáticamente “position:relative” a los enlaces y a los campos de formularios, si no tienen “position”.
• Puede ser aplicado a toda la página, o solo a una parte donde están los PNGs.
• Detecta “no-repeat” en las imágenes de fondo y fija “scaleMode” para “crop” antes que “scale”.
• Puede volver a ser aplicado por cualquier otro javascript en la página.

La desventaja es que no es compatible con la regla “background-position”, esto hace imposible posicionar la imagen cuando es necesario, por ejemplo en el uso de CSS Sprites.