Using the CSS3 opacity directive

LaVan — Tue, 20 May 2008 18:47:57 +0000

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.

Code:

#selector {

opacity:0.7; /* Modern Browsers */

filter:alpha(opacity=70); /* IE 5.5, IE6 & IE7 */

}

With these two CSS directives, you’re hitting IE5.5, IE6, IE7 and “modern browsers” (i.e., current versions of Safari, Opera, Firefox and Netscape). Together, these account for roughly 97% of our visitors. That’s generally what we shoot for – the “majority”. (The way I see it, you can kill yourself, trying to get the last 3% or so, or make get the big percentage without a lot of fuss.)
The reason I say this this is “future-proof” is that IE6 and IE7 will never understand the “opacity” rule and who knows about IE8? But it doesn’t matter, IE8 will either continue to understand the filter directive or understand the “opacity” rule … either way, you’re covered.
If you really want to hit a few more browsers (and don’t care about CSS validation), you can also add these additional directives:
Code:

#selector {

-moz-opacity:0.7; /* older Mozilla browsers, older versions of Netscape */

-khtml-opacity:0.7; /* old versions of Safari (1.x) */

}

CSS Validation Service, Web Design » Using the CSS3 opacity directive

Using the CSS3 opacity directive