css transparency

how it's done

The best way to make an element transparent is to use the css3 property opacity. It's one of the first css3 properties to get decent cross-browser support. The property accepts a value between 0 and 1, where 0 is totally transparent and 1 means no transparency at all.

Of course, none of the IE browsers accept the opacity property. From IE5.5 on Microsoft has been using one of their own filters to make elements transparent. To make IE happy, we have to include filter:alpha(opacity=80); in our css declaration, where the opacity value lies between 0 and 100. Again, 0 means the element will be totally transparent, 100 gives you no transparency at all.

By combining these two properties, we can achieve cross-browser transparency. For older browsers there are other tricks (using transparent pngs and such) but as they are not on my A-list of browsers I'm going to ignore them here.

why transparency is not often seen

The most obvious issue is the lack of separation between foreground and background transparency. When an element is given an opacity, the whole element becomes transparent. Meaning not just the background, but also all texts. This has some serious consequences when it comes to the readability of the text within the transparent element. Even when the contrast between the background and foreground colors is optimal, an opacity of 0.5 will greatly reduce readability.

As long as this problem remains, it's probably best to use transparency within sites solely as a graphical enhancement. With high opacity values (anything ∼0.8 and above) the text remains readable and the effect is still visible enough to keep its charm. Of course, it's always best to double check the contrast after applying the opacity, even when using high values.

Internet Explorer problems

As IE5.5+ uses filters to accomplish the effect, this means that whenever Active X scripting (or scripting in general) is disabled the transparency won't work. The percentage of people surfing like this might be quite low but they still have to be able to use your site.

With this in mind, it's a good guideline to make sure that whenever transparency is used, the site remains fully functional without the opacity applied. Practically speaking, it's better not to put content on top of each other. Even when the content can be accessed through a transparent element, the transparency can't be guaranteed, even in modern browsers.

firefox goes dada

And there is more. While Firefox can handle the transparency fair enough, it starts messing up the elements within.

When you play around with css properties like line-height and text-decoration, Firefox starts acting up real bad. Whenever the state of an element within a transparent container changes and certain parameters are met, the text starts jumping around, sometimes even shifting background images and surrounding borders.

As far as I know, there's no fix for this behavior, which would be a rather blocking issue for the other browsers. Luckily, there is a workaround to keep the transparency going in IE, Safari and Opera. To make it work in IE we can use conditional comments to serve IE specific css. We can simply drop the filter in there and IE has transparency. But if you like keeping a clean main stylesheet, you should have been doing this already.

As for the other browsers, we use some Mozilla legacy. Long before opacity, Mozilla used its own property called -moz-opacity. While Firefox supports the newer (and standard) opacity property, it still accepts -moz-opacity too. By abusing this, we can simply set the opacity for Safari and Opera and disable it again for Firefox.

The inconsistencies in Firefox are only triggered under certain circumstances, so in a very controlled environment the transparency could just as well be applied. In most cases, it's better to drop the transparency in Firefox as the issues are quite irritating and rather unpredictable. It's not every day we gracefully degrade one of our favorite browsers.