From 0fd0cde09902d69d02a0436da49c69cdda9bd1d3 Mon Sep 17 00:00:00 2001 From: Angelos Chalaris Date: Mon, 12 Mar 2018 22:29:23 +0200 Subject: [PATCH] Update prefix.md --- snippets/prefix.md | 16 ++++++---------- 1 file changed, 6 insertions(+), 10 deletions(-) diff --git a/snippets/prefix.md b/snippets/prefix.md index e6b53ece1..b5704f7b5 100644 --- a/snippets/prefix.md +++ b/snippets/prefix.md @@ -2,22 +2,18 @@ Returns the prefixed version (if necessary) of a CSS property that the browser supports. -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 `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 = property => { +const prefix = prop => { + const capitalizedProp = prop.charAt(0).toUpperCase() + prop.slice(1); 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; + 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('transform'); // 'transform' on a supported browser, otherwise 'webkitTransform' or 'mozTransform' or 'msTransform' or 'oTransform' +prefix('appearance'); // 'appearance' on a supported browser, otherwise 'webkitAppearance', 'mozAppearance', 'msAppearance' or 'oAppearance' ```