Opacity in Firefox, Safari and IE

Internet Explorer has suppored opacity for a long time but it’s also possible to change the opacity of a layer in Safari, and both newer and older versions of Mozilla (including Firefox).

The code for setting the opacity of a layer to 50% (in JavaScript) is:

  • For IE/Win: layer.style.filter = “alpha(opacity:50)”;
  • For Safari (pre version 1.2), Konqueror: layer.style.KHTMLOpacity = .5;
  • For older versions of Mozilla and Firefox: layer.style.MozOpacity = .5;
  • For Safari 1.2, newer Firefox and Mozilla using CSS3: layer.style.opacity = .5;

The main difference now between IE and the other browsers is that in IE opacity is specified as 0 to 100 whereas in Firefox and Safari it is a decimal from 0 to 1.