Skip to content

Instantly share code, notes, and snippets.

@addyosmani
Forked from danheberden/vendorPrefix.js
Created August 8, 2011 06:13
Show Gist options
  • Save addyosmani/1131285 to your computer and use it in GitHub Desktop.
Save addyosmani/1131285 to your computer and use it in GitHub Desktop.
Get the vendor prefix for a property in a specific context.
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));
@molokoloco
Copy link

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment