Can you test for browser support for -moz-linear-gradient?

Question

I would like to use feature detection to tell whether the user's version of Firefox supports the CSS style value -moz-linear-gradient. (This was added in Gecko 1.9.2. Version 3.6 of Firefox uses this.)

I can't use document.body.style.mozLinearGradient (or something similar) because -moz-linear-gradient is not a style property but a style value.

Does anyone know how to test for this without using version numbers?

Answer 1

I'm not sure how, but Modernizr (a nice little feature-detection script) appears to do it.

I guess you could create an (offscreen?) element, set that as it's style, and then poke around in the DOM to see if the browser successfully applied it?

Answer 2

Just assign it as style value and check afterwards if it is there.

Kickoff example:

function supportsMozLinearGradient() {
    var element = document.getElementsByTagName('script')[0]; // Just grab an "invisible" element.
    var oldstyle = element.style.background; // Backup old style.
    try {
        element.style.background = '-moz-linear-gradient(top, black, white)';
    } catch(e) {
        // Ignore failures.
    }
    var supports = element.style.background.indexOf('-moz-linear-gradient') > -1; // Did it accept?
    element.style.background = oldstyle; // Restore old style.
    return supports;
}

Answer 3

here's how > check for -moz-background-size instead (which was added in ff 3.6)

if ('MozBackgroundSize' in document.body.style) �

Answer 4

This is how MooTools detects Gecko (Firefox) engine (I'm "paraphrasing" slightly)

gecko = (!document.getBoxObjectFor && window.mozInnerScreenX == null) ? false : ((document.getElementsByClassName) ? 19 : 18)

So if it's FF it'll return 19 or 18, I believe 19 is 3.x and 18 is 2.x

And apparently FF3.6 stopped supporting document.getBoxObjectFor, so to detect 3.6 I basically do

isFF36 = gecko && !document.getBoxObjectFor

Works like a charm from a few tests I did.

If you're not using MooTools you can probably combine the two into one statement that would return something like false or 'ff' or 'f36' but I'm too lazy to work through that logic :)