From 170a1408f56bcee8cb2726a678650af5a82bb92d Mon Sep 17 00:00:00 2001 From: atomiks Date: Thu, 8 Mar 2018 23:22:54 +1000 Subject: [PATCH 1/5] Create prefix.md --- snippets/prefix.md | 28 ++++++++++++++++++++++++++++ 1 file changed, 28 insertions(+) create mode 100644 snippets/prefix.md 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' +``` From 25d1c5f1e78bce83e94161a7c62a1d544192fabe Mon Sep 17 00:00:00 2001 From: atomiks Date: Thu, 8 Mar 2018 23:25:11 +1000 Subject: [PATCH 2/5] Update tag_database --- tag_database | 1 + 1 file changed, 1 insertion(+) 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 From 1dd26d685f82d61a1cb8b0ee8710f77b094b9e46 Mon Sep 17 00:00:00 2001 From: atomiks Date: Thu, 8 Mar 2018 23:26:08 +1000 Subject: [PATCH 3/5] Update prefix.md --- snippets/prefix.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/snippets/prefix.md b/snippets/prefix.md index 1de9b283c..45e28a598 100644 --- a/snippets/prefix.md +++ b/snippets/prefix.md @@ -1,6 +1,6 @@ ### prefix -Automatically prefixes a property to the one supported by the browser. +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 `String.charAt()` From 9cd5323488ab6d8061a2d0b7ba836d8b189390d7 Mon Sep 17 00:00:00 2001 From: Angelos Chalaris Date: Mon, 12 Mar 2018 22:01:31 +0200 Subject: [PATCH 4/5] Update prefix.md --- snippets/prefix.md | 23 +++++++++-------------- 1 file changed, 9 insertions(+), 14 deletions(-) diff --git a/snippets/prefix.md b/snippets/prefix.md index 45e28a598..e6b53ece1 100644 --- a/snippets/prefix.md +++ b/snippets/prefix.md @@ -2,27 +2,22 @@ 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 `String.charAt()` -and `String.toUpperCase()` to capitalize the property, which will be appended to the vendor prefix string. +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) + 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 - } + const prefix = prefixes[i]; + const prefixedProp = prefix ? prefix + upperProp : property; + if (typeof document.body.style[prefixedProp] !== 'undefined') return prefixedProp; } - return null + return null; } ``` ```js -prefix('transform') -// 'transform' on a supported browser -// otherwise 'webkitTransform' or 'mozTransform' or 'msTransform' or 'oTransform' +prefix('transform'); // 'transform' on a supported browser, otherwise 'webkitTransform' or 'mozTransform' or 'msTransform' or 'oTransform' ``` From 0fd0cde09902d69d02a0436da49c69cdda9bd1d3 Mon Sep 17 00:00:00 2001 From: Angelos Chalaris Date: Mon, 12 Mar 2018 22:29:23 +0200 Subject: [PATCH 5/5] 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' ```