You want CSS opacity to go with that? Well, suit yourself
Personally, I like opacity when it is used well in a web site. And instead of some static images, I prefer, when possible, that it is achieved through CSS.
CSS offers the developer complete flexibility when it comes to adapting the size and level of transparency. It can also easily be animated or manipulated in other ways with JavaScript, which makes it a very powerful and flexible solution.
How do I use opacity in CSS?
It’s quite simple. Opacity is specified by W3C in the CSS Color Module Level 3 Working Draft, and to use it for an element, it simply goes like this:
#oh-so-pretty {
background: #999;
opacity: 0.8;
}Simple as pie, right? Well, not quite…
Oh, there’s Internet Explorer
There’s a company called Microsoft manufacturing a web browser called Internet Explorer. While the above code works in all the latest versions of Firefox, Safari and Opera (and has for quite some time), and additionally the new Google Chrome, not surprisingly, Microsoft decided to take their own route.
To get opacity in Internet Explorer, you need to use this code:
#my-poor-MS-element {
background: #999;
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
}Quite simple and intuitive, right? 
So, except from going away to a standardized and simple syntax, to annoy you more, the scale for opacity goes from 0 - 100 in Internet Explorer, when it goes from 0 - 1 in every other web browser, giving you a nice treat when you want to dynamically change the value.
Wait, there’s more
What amuses me is following the blog of the Internet Explorer development team, where they truly do seem to struggle hard to make the upcoming version of Internet Explorer, IE 8, into a better product than its predecessors. Now and then, a true gem pops up, and reveals what a ridiculous world we web developers live in.
In a very justified move, Microsoft is aiming to remove all their own made-up CSS extensions which aren’t approved by the W3C (as of yet), so they will all need a prefix to work in IE 8: -MS. All good, and well, you might think. Nope.
Because the problem with this is that while they do that, for certain CSS features they continue to stubbornly refuse to implement the W3C syntax that everyone uses, resulting in one code for IE 5 - 7, another for IE 8 and then one proper one, implemented by web browser who respect web standards. Unlucky for you, opacity is one of those features.
Microsoft’s recommended way of using opacity in a web page (hold on tight to something now) looks like this:
#my-poor-MS-element {
background: #999;
/* For web browsers who care */
opacity: 0.8;
/* For IE 5-7 */
filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80);
/* For IE 8 (and 9, 10, 11?). Don't miss the added quotes */
-MS-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
}Since this isn’t April 1st, I do continue to wonder if there’s some other date when such jokes are allowed to?
The idea of web browser vendor-specific prefixes
The whole idea, the point, of web browser vendor-specific prefixes are for them to be used with new CSS features, which also most likely are in some W3C draft for things to come. And if not, it’s there for experimental support or CSS properties submitted for a future W3C inclusion.
I’m not sure, but feel fairly sure in stating that Microsoft’s suggested filter approach is not submitted to the W3C, but if it is, it will never be accepted since it’s overly complicated and just not a necessary mean for the end in question.
Therefore, Microsoft, get your act together and implement the opacity syntax for IE 8 now. I don’t care if it maps to your funky filter-solution behind the scenes, but respect the proper way of writing it and the web developers having to write the code.
Dave
