Using the CSS3 opacity directive is easy and it’s completely future-proof, assuming that it’s accepted without changes, which is probably a safe bet. Unfortunately, this only targets modern browsers, such as current versions of FireFox, Opera, Safari & Netscape (which accounts for roughly 30% of our current traffic).
Unfortunately, if a browser doesn’t render opacity properly, the results are awful. Visitors might not be able to SEE the content you have, under a nearly transparent element, if their browsers don’t understand the directive! Not very accessible at all.
When you use opacity, it’s important to insure that the majority of visitors browsers will render it properly. The first step, is getting Internet Explorer to play nice.
The good news is that Internet Explorer already has a proprietary CSS extension that duplicates the opacity directive. IE has a way of creating effects using visual filters and transitions. (You can demo all the variations of filters and transitions at this demo site).
I wouldn’t normally recommend using these IE-only CSS extensions for your website seo, but there’s one extension that will mimic the CSS3 opacity directive and it comes in handy here. It’s called the “Alpha Filter” and it can be easily applied in CSS file. (more…)