How do you properly detect the browser's support for opacity?

Question

I've got some javascript code that applies an alpha transparency. Before it does that it attempts to detect what type of transparency the browser supports and stores that in a variable for use later. Here's what the code looks like:

// figure out the browser support for opacity
if (typeof br.backImg.style.opacity != 'undefined') 
    opacityType = 'opacity';
else if (typeof br.backImg.filters == 'object') 
    opacityType = 'filter';
else 
    opacityType = 'none';

For Firefox and Safari, the first condition is true, for IE7 the second condition is true, but for IE6 it falls to the last condition. Why would IE6 not have a filters object? Is there a better way of detecting this?

Answer 1

What you understand as filters is called opacity. Real filters are a proprietary IE extension which enables opacity amongst many other things for that browser.

Try this article for cross-browser transparency techniques.

The JS equivalents are exactly the same as described: style.opacity or style.filter. More likely problem is that your doctype is transitional and/or the item you're trying to make transparent doesn't have the magical hasLayout

Answer 2

In IE7 it is filter**s** and in IE6 it is filter.

The code below returns:

• 'opacity' if style.opacity is supported
• 'filter' for MS filter ( IE < 7 )
• 'filters' for MS filters ( IE7 )
• 'none' for everything else

.

var opacityType=(
  (typeof o.style.opacity !== 'undefined') ? 'opacity' :
  /*@cc_on @if (@_jscript)
    (typeof o.filters === 'object') ? 'filters' :
    (typeof o.filter === 'string') ? 'filter' :
  @end @*/
  'none'
);

The @cc_on, @if and @_jscript are used in a conditional comment that only IE supports.

I have tested this on FF3, IE6, IE7, Opera9 and Chrome 1 but not on IE4,5,or 8.

According to quirksmode MS has changed the CSS from filter to -ms-filter so I don't know what result you get with IE8.

According to mozilla opacity has been supported since FF 0.9, Opera 9 and Safari 1.2 and filter since IE4.

I don't like to do browser sniffing, but sometimes it is necessary and conditional comments make it so much easier to handle specific IE things.