Get the vendor prefix for a property in a specific context.

vendorPrefix.js

function getPrefix(prop, context) {
    var vendorPrefixes = ['moz', 'webkit', 'khtml', 'o', 'ms'],
        upper = prop.charAt(0).toUpperCase() + prop.slice(1),
        pref, len = vendorPrefixes.length,
        q;

    while (len--) {
        q = vendorPrefixes[len];
        if (context.toString().indexOf('style')) {
            q = q.charAt(0).toUpperCase() + q.slice(1);
        }
        if (q + upper in context) {
            pref = q;
        }
    }
    if (prop in context) {
        pref = prop;
    }

    return pref ? '-' + pref.toLowerCase() + '-' : '';
}
//LocalStorage test
console.log(getPrefix('localStorage', window));
//Page Visibility API
console.log(getPrefix('hidden', document));
//CSS3 transforms
console.log(getPrefix('transform', document.createElement('div').style));
//CSS3 transitions
console.log(getPrefix('transition', document.createElement('div').style));
//File API test (very basic version)
console.log(getPrefix('FileReader', window));

Some feedback/suggestions:

1. There’s no need to initialize q to null.

if ((q + upper) in context) {
    pref = (q);
}

→

if (q + upper in context) { // well, you could leave the () for readability
    pref = q;
}

if (context.toString().indexOf('style')) 

I think you mean if (context.toString().indexOf('style') > -1) or if (~context.toString().indexOf('style')), no?

if (pref) {
    return '-' + pref.toLowerCase() + '-';
}
return '';

→

return pref ? '-' + pref.toLowerCase() + '-' : '';

if (prop in context) {
    pref = prop;
}

Use hasOwnProperty here. Consider e.g. getPrefix('toString', document).

Rewritten version (UNTESTED)

/*
 * vendorPrefix.js - Copyright(c) Addy Osmani 2011.
 * https://github.com/addyosmani
 * Tests for native support of a browser property in a specific context
 * If supported, a value will be returned.
 */

function getPrefix(prop, context) {
    var vendorPrefixes = ['moz', 'webkit', 'khtml', 'o', 'ms'],
        upper = prop.charAt(0).toUpperCase() + prop.slice(1),
        len = vendorPrefixes.length,
        pref, q;

    while (len--) {
        q = vendorPrefixes[len];
        if (~context.toString().indexOf('style')) {
            q = q.charAt(0).toUpperCase() + q.slice(1);
        }
        if (context.hasOwnProperty(q + upper)) {
            pref = q;
        }
    }
    if (context.hasOwnProperty(prop)) {
        pref = prop;
    }

    return pref ? '-' + pref.toLowerCase() + '-' : '';
}

Thanks Mathias!.

(please ignore if still editing) I've tested out the suggested changes on the existing test cases and the first 4 appear to be failing at the moment in FF5 whilst Chrome/Webkit is working fine. Will play around with the code a little more to find out if there's something obvious breaking!.

Hello,

I was working on the same pb some times ago http://jsfiddle.net/molokoloco/f6Z3D/
I have to test also the empty prefix string, for some old properties like "opacity" that are no more "-moz-opacity"
Also there is a trap with the jQuery method for reading style properties... so i have to call it with
{{{
cssProp[cssPrefix('Transform')] = 'rotate(20deg)';
cssProp[cssPrefix('borderRadius')] = '5px'; // Keep the camelCaze (jQuery like)
}}}