diff --git a/snippets/prefix.md b/snippets/prefix.md new file mode 100644 index 000000000..b5704f7b5 --- /dev/null +++ b/snippets/prefix.md @@ -0,0 +1,19 @@ +### prefix + +Returns the prefixed version (if necessary) of a CSS property that the browser supports. + +Use `Array.findIndex()` on an array of vendor prefix strings to test 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 = prop => { + const capitalizedProp = prop.charAt(0).toUpperCase() + prop.slice(1); + const prefixes = ['', 'webkit', 'moz', 'ms', 'o']; + const i = prefixes.findIndex(prefix => typeof document.body.style[(prefix ? prefix + capitalizedProp : prop)] !== 'undefined'); + return i !== -1 ? i === 0 ? prop : prefixes[i] + capitalizedProp : null; +} +``` + +```js +prefix('appearance'); // 'appearance' on a supported browser, otherwise 'webkitAppearance', 'mozAppearance', 'msAppearance' or 'oAppearance' +``` diff --git a/tag_database b/tag_database index 6207df3f1..ebfa9820a 100644 --- a/tag_database +++ b/tag_database @@ -192,6 +192,7 @@ pipeAsyncFunctions:adapter,function,promise pipeFunctions:adapter,function pluralize:string powerset:math +prefix:browser,utility prettyBytes:utility,string,math primes:math,array promisify:adapter,function,promise