vendorPrefix.js (2339B)
1 // 2 // Vendor-Prefix Helper Functions For Testing CSS 3 // 4 5 (function(root) { 6 'use strict'; 7 8 var prefixCache = {}; 9 10 // convert "foo-bar" to "fooBar" 11 function camelCase(str) { 12 return str.replace(/\-(\w)/g, function(match, letter){ 13 return letter.toUpperCase(); 14 }); 15 } 16 17 // vendor-prefix a css property 18 root.addVendorPrefix = function (name) { 19 var prefix = getVendorPrefix(name); 20 if (prefix === false) { 21 // property unknown to browser 22 return name; 23 } 24 25 return prefix + name; 26 }; 27 28 // vendor-prefix a css property value 29 root.addValueVendorPrefix = function (property, value) { 30 var prefix = getValueVendorPrefix(property, value); 31 if (prefix === false) { 32 // property unknown to browser 33 return name; 34 } 35 36 return prefix + value; 37 }; 38 39 // identify vendor-prefix for css property 40 root.getVendorPrefix = function(name) { 41 if (prefixCache[name] !== undefined) { 42 return prefixCache[name]; 43 } 44 45 var elem = document.createElement("div"); 46 name = camelCase(name); 47 48 if (name in elem.style) { 49 return prefixCache[name] = ""; 50 } 51 52 var prefixes = ["Webkit", "Moz", "O", "ms"]; 53 var styles = ["-webkit-", "-moz-", "-o-", "-ms-"]; 54 var _name = name.substring(0, 1).toUpperCase() + name.substring(1); 55 56 for (var i = 0, length = prefixes.length; i < length; i++) { 57 if (prefixes[i] + _name in elem.style) { 58 return prefixCache[name] = styles[i]; 59 } 60 } 61 62 return prefixCache[name] = name in elem.style ? "" : false; 63 }; 64 65 // identify vendor-prefix for css property value 66 root.getValueVendorPrefix = function(property, value) { 67 var elem = document.createElement("div"); 68 // note: webkit needs the element to be attached to the dom 69 document.body.appendChild(elem); 70 var styles = ["-webkit-", "-moz-", "-o-", "-ms-", ""]; 71 var _property = getVendorPrefix(property) + property; 72 for (var i=0, length = styles.length; i < length; i++) { 73 var _value = styles[i] + value; 74 elem.setAttribute('style', _property + ": " + _value); 75 var _computed = computedStyle(elem, _property); 76 if (_computed && _computed !== 'none') { 77 document.body.removeChild(elem); 78 return styles[i]; 79 } 80 } 81 document.body.removeChild(elem); 82 return false; 83 }; 84 85 86 })(window);