CSS Opacity for All Browsers Cross Browser Compatible
May 3rd, 2009 | Published in technology, Web Development | 2 Comments
If you are looking for a Cross Browser Compatible CSS Opacity code, you need look no further. The following provides 100% opacity (which is the same as 0% transparency.)
1 2 3 4 5 6 7 8 9 10 | Body { ...your body css... -moz-opacity: 1.0 !important; -webkit-opacity: 1.0!important; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)" !important; filter: alpha(opacity=100) !important; opacity: 1.0 !important; } |
The key is ensuring that the order of the opacity entries are kept in this format.
The -webkit- opacity handles chrome, the -mox- handles FF, Netscape, Mozilla, the -ms- handles older IE versions, like 5 and 6.
- best css opacity for all browsers.
- opacity css cross browser?
- how to use css opacity
- what is css opacity
- cross browser opacity css
- opacity css for IE6, IE5
April 24th, 2012 at 10:50 pm (#)
Does this includes Opera?
July 30th, 2012 at 11:07 pm (#)
Just a helpful hint since this comes up pretty high when searching for “webkit-opacity”, the vendor prefix is no longer needed. It’s been removed from most major browsers since 2004: https://developer.mozilla.org/en/CSS/opacity#Browser_compatibility. I’d suggest keeping the ms-filter one in there since there’s plenty of people with older version of IE, but the other ones will just bloat your CSS.