Transparency hell...how IE once again ruins the web »
FERDY CHRISTANT - FEB 12, 2009 (03:35:20 PM)
Here's another Microsoft web accomplishment:
When it comes down to creating alpha transparent elements on the web, there are two ways to do this:
1. The CSS way
For modern browsers, this bit of CSS will render the element #myblock with a transparency of 50%:
The official attribute to use is "opacity", the others are browser-specific because "opacity" is not supported by all browsers. It's a bit hackish to put all three in, but it is needed for now. Furthermore, this hack will continue to work in the future once opacity is used by all.
Note: the above will work for IE7, but not IE6. IE 6, as always, requires an entirely different hack.
2. Using PNG images
The CSS way is great to create transparent surfaces on your web page, where every part of the surface has the same opacity. If you need something more complex though, PNG images are the way to go. I remember when IE7 launched how the product team demonstrated the excellent PNG support of IE7. Fast forward to reality:
See image. It consists of a solid red square with a solid yellow square PNG image on top, with an opacity of 50%. Firefox renders it correctly, as it does most of the time. IE7 screws it up royally, as it does most of the time. The issue is caused by IE7's handling of gamma correction, a header that is/can be part of a PNG image. Gamma correction is meant to provide consistent colors on all monitors. As you can see, IE7 accomplished the exact opposite. You can remove the gamma correction header from your PNG image using this tool. It will now render as yellow. But not the same yellow on all monitors, since we deleted the gamma correction values. Sigh.
I thought I could not be dissapointed again by IE, my expectations are that low. IE6 has costs me so many hours of my life that I'm not even intending to support it anymore. I give up. IE7, however, gave me some hope. Now, here we are again. A crucial feature will not be robustly available for the next 5 years, because that is how long we will have to support this piece of shit.
I do not see the example above as an incident. I would not be surprised if the total cost of lost productivity due to IE bugs could run into the billions each year. When will Microsoft learn the web?