Support for Opacity in Modern Browser

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:

Hello!

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:

Hello!

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:

Hello!

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:

Hello!

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]

I'm testing your page with IE6 and I

I'm testing your page with IE6 and I see solid red for everything. I downloaded the standalone version here:

http://browsers.evolt.org/download.php?/ie/32bit/standalone/ie6eolas_nt.zip

This posting is already 1 year old,

This posting is already 1 year old, just want to add Opera now support opacity. Konqueror still doesnt, we have to wait for the QT4 port.

That would be great! When do you

That would be great!

When do you think you might get this version ready?

Let me know if want me to Beta Test.

Thanks again.

Maybe I'll add real transparency in the

Maybe I'll add real transparency in the future. Guess this will be a new release, i.e. another JavaScript file, since the algorithms required are much different from the current approach...

Hi, Thanks so much for your incredibly

Hi, Thanks so much for your incredibly useful RuzeeBorders & Events!

I am trying to use the v0.16 border shadows over a gradient background image, but the pseudo-transparency really does not look nice.

I have just read your great explanation as to why you chose to not implement full opacity/alpha filter due to less than complete cross-browser support.

However I think it a shame to miss out on having this great feature because of a small proportion of browsers that will still see the pseudo-transparency (even if less than perfect).

I feel this is the only way to get the browser makers to add additional features - use them, and let it look bad in their product.

So, PLEASE could you add this as an optional feature for developers to choose to implement or not?

Thanks again, I would be happy to beta-test this for you.
NewTrax