HTML & CSS: Opacity/Transparency

CSS3 is the next major version of CSS at the time of writing this tutorial. It plans to introduce a lot of interesting and useful new features, some of which are currently implemented into modern browsers (sometimes in different ways as the implementations are purely experimental). One of the new features (and one of the most widely implemented at this point) is transparency. Transparency can be a bit messy to implement, simply because some older browsers have implemented it in different ways (as they want users to be able to use it before the CSS3 spec is properly finished). When browsers do this, they usually implement the property with vendor prefixes. These are simply their vendor name (usually surrounded by hyphens) before the property name. So to make sure we display everything correctly in some older browsers, we will need to have a couple of lines which all really mean the same thing.

Because CSS takes priority for lines lower down in the stylesheet, it's usually best to specify the browser specific properties first, and then to put the general, actual CSS3 property last (so if the browser does support the proper CSS3, it will use that implementation). The recommended code for implementing transparency (or opacity) is by using first the IE implementation (which uses IEs filter system and is fairly odd), then using the -moz- vendor prefix for old versions of Firefox, then using the -khtml- vendor prefix for old versions of Safari, then finally using the pure CSS3 version. Note that we don't have to use the -webkit- vendor prefix, as all webkit browsers support the CSS3 itself.

filter:alpha(opacity=89); /* IE */
-moz-opacity:0.89; /* Old Firefox */
-khtml-opacity: 0.89; /* Old Safari */
opacity: 0.89; /* Modern Browsers! */

In the above case we are setting the opacity (transparency) to 0.89, 1 is the value for completely visible, and 0 is the value for completely invisible.