Skip to content

Instantly share code, notes, and snippets.

@stilist
Created May 19, 2010 01:59
Show Gist options
  • Save stilist/405856 to your computer and use it in GitHub Desktop.
Save stilist/405856 to your computer and use it in GitHub Desktop.
// How to determine if you need a vendor prefix to access a CSS property.
//
// License: http://github.com/stilist/ratafiacurrant/blob/master/License
var vendorPrefixes = ["", "-webkit-", "-moz-"];
var test = document.createElement("div");
// http://unscriptable.com/index.php/2009/05/01/a-better-javascript-memoizer/
var cssPrefix = (function () {
var cache = {};
return function (property, value) {
if (null === value) {
value = 1;
}
if (undefined === cache[property]) {
for (var i = 0; i < vendorPrefixes.length; ++i) {
var composedName = vendorPrefixes[i] + property;
test.style.composedName = value;
var cStyle = document.defaultView.getComputedStyle(test, null);
if (null !== cStyle.getPropertyValue(composedName)) {
cache[property] = vendorPrefixes[i];
break;
}
}
}
return cache[property];
};
})();
// "-webkit-"
alert(cssPrefix("column-count"));
// ""
alert(cssPrefix("border-width"));
// "" -- cache hit
alert(cssPrefix("border-width"));
// undefined
alert(cssPrefix("asdfasdf"));
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment