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!

Related posts:

1. Tutorial: Simple Cross-browser tooltip with CSS This article illustrate how tooltip can be done with only...
2. Tutorial: Cross browser Multiple Uploader With SWFUpload And JavaScript Create a multiple uploader that is used by Wordpress without...
3. Solutions to Cross-Site Scripting (XSS) Attack Cross site scripting attack also known as XSS is a...
4. Solutions to Cross-Site Request Forgery Attacks An attack even GMail, Wikipedia and Digg experienced before. Cross-site...
5. Various Ways To Fix Container Height To Float Element In CSS Float element often gets out of container where the floating...

Author: Clay Lua

Clay is the main writer and founder of Hungred.com. A person who thinks a lot and spend majority of his time online. He spend most of his time developing web application and writing articles to share and learn. You can find him at his twitter.