diff --git a/snippets/prefix.md b/snippets/prefix.md new file mode 100644 index 000000000..1de9b283c --- /dev/null +++ b/snippets/prefix.md @@ -0,0 +1,28 @@ +### prefix + +Automatically prefixes a property to the one supported by the browser. + +Use an array of vendor prefix strings and loop through them, testing if `document.body` has one +of them defined in its CSSStyleDeclaration object, otherwise return `null`. Use `String.charAt()` +and `String.toUpperCase()` to capitalize the property, which will be appended to the vendor prefix string. + +```js +const prefix = property => { + const prefixes = ['', 'webkit', 'moz', 'ms', 'o'] + const upperProp = property.charAt(0).toUpperCase() + property.slice(1) + for (let i = 0; i < prefixes.length; i++) { + const prefix = prefixes[i] + const prefixedProp = prefix ? prefix + upperProp : property + if (typeof document.body.style[prefixedProp] !== 'undefined') { + return prefixedProp + } + } + return null +} +``` + +```js +prefix('transform') +// 'transform' on a supported browser +// otherwise 'webkitTransform' or 'mozTransform' or 'msTransform' or 'oTransform' +```