Cross Browser Compatible CSS Opacity

This is something that i like to write down on my site; cross browser CSS opacity. CSS opacity is used on my daily web development almost every single time. Every time when i need a cross browser opacity solution, i will have to search on Google and try to remember which one is the one that i previously used, that worked for all browsers. There is never a permanent updated solution on Google that is constantly updated with the latest browser. Most of them are written centuries ago. Things have changed. Many new versions and browsers have also emerged. I need a cross browser compatible opacity solution that is updated and works.

IE 8 changes

IE 8 has changed CSS Opacity a little. The old CSS declaration might not cause your div block and images to fade like it used to do. In IE8, a new declaration will have to be formed.

.myclassname /* classname */
{
-moz-opacity:.70;
-ms-filter:”alpha(opacity=70)”;
filter:alpha(opacity=70);
opacity:.70;
}

Please visit the IEBlog for more information on IE 8 changes.

Cross Browser Opacity Declaration

The updated solution for cross browser compatible opacity solution that worked on older and newer browsers is:

.myclassname /* classname */
{
        filter: alpha(opacity:0.7);
        KHTMLOpacity: 0.7;
        MozOpacity: 0.7;
        -khtml-opacity:.70;
        -ms-filter:”alpha(opacity=70)”;
        -moz-opacity:.70;
        filter:alpha(opacity=70);
        opacity:.70;
}

The above declaration support 1.x versions of Safari and both newer and older browser too. It has been tested on,

• Standard: FF gt 1.5, Opera, Safari
• IE lt 8
• IE 8
• Safari 1.x
• FF lt 1.5, Netscape
• Flock 1.2+
• Iceweasel 2.x
• Dillo 0.x
• Minefield 3.x
• Chrome 1.x
• k-Melon 1.x
• SeaMonkey 1.x
• Shiretoko 3.x

Like this post? Share it!

No related posts.