IE and Opacity
So I've recently run into some new interesting issues when trying out some fancy effects with opacity. As it turns out, there are a whole set of new issues to be dealt with in order to not only get IE to understand opacity values, but how to get it to work in all versions of IE. This article attempts to address this.
So... if you've played much with CSS, then you may be aware of a style called "opacity". Truth to tell, this is not yet part of any standards, but is accepted as being 'standard enough' for most developers to have fun with it. Presently the W3C is lobbying to have this turned into a standard but in the meantime...
The humble 'opacity' attribute does however work in most browsers. The value is a very simple floating point numeric to indicate how opaque a given element should be. For example:
.myseethroughclass { opacity: 0.5; }
would set the opacity for the element of this class type to 50% opacity. A value of '1' would indicate 100%.
With IE, there has been a traditional work around as follows:
.myseethroughclass { opacity: 0.5; /* added for IE5-7 compatibility */ filter: alpha(opacity=50); }
Not a big deal, right? Besides the fact your browser has the additional code to deal with and if you are running debuggers of any kind you are guaranteed to hear some grumbling.
Now however we have IE8 coming out. Of course.. backwards compatibility is not something that MS seems to comprehend as something the world might want. Instead, they have decided to change it yet again. Here is a sample work around using the same example:
.myseethroughclass { opacity: 0.5; /* added for IE8 compatibility */ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; /* added for IE5-7 compatibility */ filter: alpha(opacity=50); }
Note that the order of the two IE specific attributes is important - if you run IE8 in IE7 'compatibility' mode, it will break otherwise.
So... while this problem can be resolved, I sincerely hope that MS will stop screwing around and adhere to some standards for once in their illustrious lifespan....