4

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?

Paul D. Waite
  • 96,640
  • 56
  • 199
  • 270
aakoch
  • 1,164
  • 1
  • 9
  • 18

4 Answers4

3

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?

Olly Hodgson
  • 15,076
  • 3
  • 40
  • 60
  • It looks like that's what Modernizr does. It creates a DOM element but doesn't add it to the page. – aakoch Feb 12 '10 at 17:35
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;
}
BalusC
  • 1,082,665
  • 372
  • 3,610
  • 3,555
1

You should check for -moz-background-size (which was introduced in Firefox v3.6). The inference won't be picked up by other browsers since the property is prefixed.

if ('MozBackgroundSize' in document.body.style)
Knu
  • 14,806
  • 5
  • 56
  • 89
0

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 :)

Ilia Draznin
  • 1,026
  • 2
  • 12
  • 24
  • 1
    Gah! Nooo! Feature detection, not browser detection! Otherwise you're setting yourself up for endless maintenance updates as new versions/variants of the rendering engine appear. What if the next gecko removes or changes support for whatever you're relying upon? – Olly Hodgson Feb 22 '10 at 10:14