A guide to CSS Opacity
CSS opacity has been a bit of a trendy technique for a few years now, and it’s been especially frustrating for developers trying to implement opacity (also referred to as CSS transparency) in a cross-browser fashion, because it’s taken a while for the different browsers to finally agree on settings. There is still not a universal method to ensure opacity settings work on all currently-used browsers, but things have improved in the last little while.
This reference is going to provide a detailed overview of CSS opacity, along with some code examples and explanations to help you implement this useful CSS technique in your projects equally across all browsers.
One thing that should be noted about CSS opacity is that, although it’s been in use for a number of years now, it has never been, and is currently not a standard property. It’s a non-standard technique that is supposed to be part of the CSS3 specification.
Old Opacity Settings
Here are the old opacity settings that were required for older versions of Firefox and Safari:
#myElement {
-khtml-opacity: .5;
-moz-opacity: 0.5;
}
The -khtml-opacity setting was for older versions of the webkit rendering engine, and was necessary in order to get older versions of Safari to work. This proprietary property is now obsolete and is no longer needed unless you know that you have a significant amount of web traffic coming from visitors using Safari 1.x., which is highly unlikely.
The next line uses the proprietary property -moz-opacity, which was aimed at very early versions of the Mozilla rendering engine, and dates back even to Netscape Navigator. Firefox stopped requiring the -moz-opacity property since Firefox 0.9. Firefox 3.5 (now using the Gecko engine) has dropped support for this property.
CSS Opacity in Firefox, Safari, Chrome, and Opera
Here is the simplest and most up to date syntax for CSS opacity in all current browsers except Internet Explorer:
#myElement {
opacity: .7;
}
The syntax above will set an element to 70% opacity (or 30% transparency). A setting of opacity: 1 would make the element opaque, whereas a setting of opacity: 0 would make the element completely invisible. This is easy to remember if you keep in mind that the word “opacity” comes from the word “opaque”, which is the opposite of “transparent”. The lower the opacity (or “opaqueness”), the closer you’ll be to transparency.
The opacity property can be set to two decimal places, so a value of “.01″ would be different from a value of “.02″, although the visible difference would be very hard to notice. Generally, it’s best to stick to one decimal place, using values like “.3″ or “.7″.
CSS Opacity in Internet Explorer
As usual, Internet Explorer doesn’t play well with others, and since there are currently three different versions of Internet Explorer in common use, the transparency settings are different, and sometimes require additional CSS to get them to work.
#myElement {
filter: alpha(opacity=40);
}
The above css uses the proprietary filter property to get transparency to work in Internet Explorer versions 6-8. There is one caveat for IE6 and IE7: In order for the transparency settings to take effect, the element in question needs to “have layout”. An element can be given layout using a number of CSS properties, including width and position. For details on the Microsoft-only hasLayout property, and how to trigger it, see this article.
Another way to set transparency via CSS in Internet Explorer 8 uses the following syntax (note the comments that indicate which versions):
#myElement {
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=40);
/* first line works in IE6, IE7, and IE8*/
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=4)";
/*second line is IE8 only*/
}
(note that the second line defines opacity at “4″, but this is only to correct a problem with the code highlighter; the value should be “40″)
The first line will work in all currently-in-use versions of IE, and the second line works only in IE8. Notice the differences between the two lines: In line two, there is a -ms- prefix attached to the filter property, and there are quotations around the entire value declaration, both of which are necessary for that syntax to work.
To be honest, I really have no idea why you would even need either of the “progid” methods, since the filter property works on any element that has layout in all versions of IE using the syntax alpha(opacity=40), as shown in the first example in this section.
Setting and Changing CSS Opacity with JavaScript
You can access the CSS opacity property in JavaScript using the following syntax:
document.getElementById("myElement").style.opacity = ".4";
// for most browsers
document.getElementById("myElement").style.filter = "alpha(opacity=40)";
// for IE
The above lines of code could be used inside of a loop or other dynamic function that alter the values in an incrementing fashion. Of course, you would first identify the client capabilities using feature detection in order to decide which line of code to use.
Setting and Changing CSS Opacity with jQuery
Setting CSS opacity directly using jQuery is much more practical and easier to implement, because the code is exactly the same for all browsers, and you don’t have to worry about an element “having layout” in IE:
$("#myElement").css({ opacity: .4 });
// works in all browsers
You can also animate the opacity of an element using the following jQuery code:
$("#myElement").animate({
opacity: .4
}, 1000, function() {
// Animation complete; works in all browsers
});
Whatever the opacity of the element is when the animation begins, it will animate until it reaches an opacity level of “.4″. The speed of the animation is set using the value “1000″, which is the duration of the animation in milliseconds. The final property listed is an optional callback function that will run some code when the animation is complete.
If the opacity of this element is already set to “.4″ in the CSS, then you won’t notice any difference when the animation runs, so the animated value has to be something significantly different.
Transparency Through RGBA
Another CSS3 technique that is supported by a few newer browsers (namely Firefox 3+, Opera 10.1+, Chrome 2+, Safari 3.1+) is setting opacity by means of an alpha channel in RGBA. Here is the syntax:
#rgba {
background: rgba(98, 135, 167, .4);
}
In the above declaration, the background is given a color in RGB (the first three numbers), then an alpha setting is given last, to implement transparency on the given color. This alpha setting works the same way as the opacity property, with any number accepted from 0 to 1, up to two decimal places. The higher the number, the closer the color will be to full opacity (opaqueness).
Transparency Through HSLA
Similar to the previous declaration, CSS3 also allows the ability to set a color along with an alpha value using HSLA, which represents Hue, Saturation, Lightness, and Alpha. Here is an example of HSLA transparency:
#hsla {
background: hsla(207, 38%, 47%, .4);
}
For a further explanation on HSLA colors, see this article on W3.org. As is the case with RGBA transparency, the last number represents the transparency setting, and works the same way as RGBA.
Effects on Validation of CSS
If you’re using any opacity settings in your CSS, your CSS code will not validate according to current W3C standards. Many developers are not as concerned about CSS validation as they are about HTML validation, but it’s something to keep in mind. This can be partially resolved for Microsoft-specific styles by placing them in separate stylesheets using conditional comments, but other browsers’ opacity styles (specifically the opacity property) would still be in your main stylesheet, causing validation errors.
The CSS opacity property is part of the CSS Color Module Level 3 (which is part of CSS3), and is (as of this writing) in the last call phase on the specification track, so although it is well supported, there is still some time before it is an official standard.
I hope I’ve covered the most important facts and code for cross-browser CSS opacity. If I’ve left out any important information, or made any errors, feel free to comment and I’ll gladly make any corrections or additions.
Resources
