Tuesday, December 6, 2011

CSS Transparency in all browsers

Transparency is one of those CSS properties that has a weird history and requires lots of different properties to ensure cross browser compatibility that goes back as far as you can. All the browsers treat transparency in a different way to overcome this issue we need to define their own specific properties.
Internet Explorer:
The first thing you need to remember to get IE to make things transparent is that the element needs to have a layout. In other words, the hasLayout DOM property must be set. So, if you want to set transparency on an element, you need to set the hasLayout property some other way. There are several CSS properties that when set on an element, cause the element to have layout as well:
  • inline:block
  • height or width with any value
  • float:left or float:right
  • zoom with any value
The easiest to apply tend to be setting the width to 100% or the zoom to 1.
In IE 8 and 9, there is support for the browser extension -ms-filter and you can use this to add alpha transparency. The following sets the opacity to 50%:
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
it only works in IE 8 and 9. To make it work in all other IE browsers, you need to add filter property also. But, make sure -ms-filter line comes first in your CSS.
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
filter: alpha(opacity=50);
Firefox older versions requires browser extension -moz-opacity. So to set the transparency in Firefox 0.8 and lower to 50% use:
-moz-opacity: 0.5;
Before Safari switched to Webkit, you needed to use the browser extension -khtml-opacity. So to set the transparency in Safari 1 and lower to 50% use:
-khtml-opacity: 0.5;
Modern Browsers:
Modern browsers like Android 2.2+, Chrome 1+, Firefox 0.9+, Internet Explorer 9+, iOS 3+ Opera 9+, and Safari 2+:
opacity: 0.5;
Finally combine all together:
.trans {
 zoom: 1; /* gives the object layout */
 filter: alpha(opacity=50);
 -moz-opacity: 0.5;
 -khtml-opacity: 0.5;
 opacity: 0.5;

No comments:

Post a Comment