UPDATE c/o of Brad Frost – Doing this will invalidate your CSS! However, this is appropriate because 1.) We know exactly what is keeping our CSS from validating and 2.) We did it anyways to get something we want to work in another browser.

This is one of the few situations where it’s ok to ignore the ! in your web developer bar.

——————————————————————————-

So I made a slight joke about progressive enhancement in a previous post, but let’s be real for a second: If you could easily get all your site features working the same way in every browser, you would.

Well, as far as IE6 – 8 go, you can get opacity to work. Normally we’d code opacity into our stylesheet like so:

It’s super easy to get this CSS rule to comply in IE6+ – but it does involve the inclusion of another CSS invalidating Microsoft filter effect. However, it’s really short and easy to remember, so there’s no excuse for not having opacity affects / rollovers in IE!

And that’s it! Whatever you wanted to be transparent will also work in IE6+! Obviuosly, instead of “0.6″ you’d type in “60″ for the filter rule.

There are actually a bevy of cool features available via Microsoft’s filter rule… too bad it only applies to their browsers, selfish bastards. Here’s a great post containing a lot of CSS2+ matching rules to Microsoft’s filters.

So, until Microsoft buckles under the ease of Webkit, at least get your opacities to be cross browser compliant, people!