I did some research about the support for opacity in modern Browser. Opacity means, that parts of your web page (DIVs, images and other elements) may be semi transparent so you can, potentially partly, see the background behind them.
Firefox
Firefox >=1.0 supports opacity via CSS3 opacity. The opacity a value ranging from 0.0 to 1.0 where 0.0 means fully transparent and 1.0 means fully visible. Here’s an example:
<div style="background:red; opacity:0.5;">
Hello!
</div>
The result:
If the result is a “full” red and not some sort of pastell pink you’re using Firefox or some other browser that supports CSS3 opacity.
Microsoft Internet Explorer
Internet Explorer 6.0 uses an Alpha DirectX filter for opacity. The value is in the range of 0 to 100(!) where 0 means invisible and 100 means fully visible. There is a long and a short way for specifying the style in your CSS. For the long way, see the MSDN link below. The short way was introduced in IE 4.0, still works in IE 6.0 (I found no info whether IE 7.0 will also support it, but I guess so) and hence this is the one I recommend:
<div style="background:red; filter:Alpha(opacity=50);">
Hello!
</div>
The result:
A full red even if you are using Internet Explorer? Oops… okay, there’s one important thing (from MSDN): “The object that the filter is applied to must have layout before the filter effect displays. You can give the object layout by setting the height or width property, setting the position property to absolute, setting the writingMode property to tb-rl, or setting the contentEditable property to true.”
So I recommend to use the 1% height hack – again:
<div style="background:red; filter:Alpha(opacity=50); height:1%;">
Hello!
</div>
The result:
Yippie (if you are on IE)! One remark: Internet Explorer 7.0 will support the CSS3 opacity property just like Firefox does.
Safari
Safari was branched from Konqueror 3.0 (KHTML) and as far as I know introduced CSS3 opacity in version 1.2. Opacity works just like in Firefox. Not much more to say ;-).
Opera
From version 9.0 on Opera supports CSS3 opacity, just like Firefox does. Opera internally uses rgba colors, at least it returns them when reading out CSS properties via Javascript. So I had the idea to trick Opera <9.0 with rgba colors:
<div style="background:rgba(255,0,0,0.5);">
Hello!
</div>
The result:
Unforunately it didn’t work and the conclusion is that, since 9.0 currently is in public beta, all stable versions of Opera do not support opacity.
Konqueror
Konqueror supported opacity in the past via style: "-khtml-opacity: 0.5;", but lost this capability with one of the Safari code merges. Safari uses the graphics accelaration of Mac OS X for the transparency and QT, the basis of KDE (and hence the basis of Konqueror), had very limited support for transparency. Had, yes: with QT 4.0 this changed and carewolf, a KDE developer has plans to implement the feature this spring. Vote for it on his blog ;-)!
So the recent versions of Konqueror – something like from version 3.3 on – have no support for opacity! And the rgba trick had also no effect…
Conclusion
Only Internet Explorer, Firefox, and Safari reliably support opacity. And if your layout relies on opacity you’re most likely doomed 😉 meaning that the site can never look correct on the other browsers such as Opera and Konqueror.
[tags]firefox, internet explorer, safari, opera, konqueror, opacity, support, transparency, css, overview[/tags]