Detecting style support

IE's playing up as per usual

[Robin_reala]

My current site has a block with an image in, which over time fades between a series of different images. This works find using standard DOM and CSS 'opacity' in Firefox. Well, as standard as a CSS3 property can be :)

So now it's time to add an IE path. I don't want to do browser sniffing per se, but detect support. I'd assumed I could do something like this (given a generic object):

if (object.style.opacity) { /* standards route */ }
else if (object.filters) { /* IE route */ }
else { /* fallback route */ }

However IE seems to be evaluating object.style.opacity as true and dropping into the standards compliant path. To be honest, I'm not even sure if you can evalutate style properties like this.

So am I on the right path or should I be looking at doing something different? A colleague suggested using 'eval()' but that seems a little heavyweight and I'm not sure if it'd even work in this context.

Thanks!

[jshanman]

With styles, you can set a property to anything, it only effects the browser that recognizes the property. So you don't need to detect if a property is set or exists, just set them all!
(taken from [brainerror.net...]

//change the opacity for different browsers
function changeOpac(opacity, id) {
var object = document.getElementById(id).style;
object.opacity = (opacity / 100);
object.MozOpacity = (opacity / 100);
object.KhtmlOpacity = (opacity / 100);
object.filter = "alpha(opacity=" + opacity + ")";
}

- JS

[Robin_reala]

Ah, that makes sense. Thanks!