Question

I recently read a tutorial on CSS browser feature detection… The end product was something like this…

var prefix = ['Moz', 'webkit', 'O', 'ms', 'Khtml'],
    test_style = document.createElement('div').style;

var css_check = function(prop) {
    if (prop in test_style) {
        return true;
    }
    for (var i = 0; i < prefix.length; i++) {
        if (prefix[i] + prop in test_style) {
            return true;
        }
    }
    return false;
};

css_check('whatev_css_property');

The part I dont understand is this…

if (prop in test_style) or if (foo in bar).

From what I’ve read if (foo in bar) is used to check if a value is in an array but I might be wrong here, I haven’t found much documentation on this. Also, if this is used to check values in an array HOW is test_style = document.createElement('div').style an array? Doesn’t make sense…

I am terrible confused. Any clarification would be greatly appreciated.

Answer 1

The in operator is used to check for the presence of a key in an array or object, e.g.

3 in [1, 2, 3] // false, since the array indices only go up to 2
2 in [1, 2, 3] // true
'x' in { x: 5 } // true
'toString' in Object.prototype // true

The style property there is an instance of CSSStyleDeclaration, which contains properties for each supported style attribute in the active browser.

The code snippet you gave in your post checks whether the viewing browser supports some version of that style (either the official one or with one of a number of common vendor prefixes).