andre/30-seconds-of-code
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Update prefix.md

Browse Source
This commit is contained in:
Angelos Chalaris
2018-03-12 22:01:31 +02:00
committed by GitHub
parent bf1aa7dbfe
commit db817765d3
1 changed files with 9 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
snippets/prefix.md
View File

@ -2,27 +2,22 @@
Returns the prefixed version (if necessary) of a CSS property that the browser supports. 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 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`.
of them defined in its CSSStyleDeclaration object, otherwise return `null`. Use `String.charAt()` Use `String.charAt()` and `String.toUpperCase()` to capitalize the property, which will be appended to the vendor prefix string.
and `String.toUpperCase()` to capitalize the property, which will be appended to the vendor prefix string.
```js ```js
const prefix = property => { const prefix = property => {
const prefixes = ['', 'webkit', 'moz', 'ms', 'o'] const prefixes = ['', 'webkit', 'moz', 'ms', 'o'];
const upperProp = property.charAt(0).toUpperCase() + property.slice(1) const upperProp = property.charAt(0).toUpperCase() + property.slice(1);
for (let i = 0; i < prefixes.length; i++) { for (let i = 0; i < prefixes.length; i++) {
const prefix = prefixes[i] const prefix = prefixes[i];
const prefixedProp = prefix ? prefix + upperProp : property const prefixedProp = prefix ? prefix + upperProp : property;
if (typeof document.body.style[prefixedProp] !== 'undefined') { if (typeof document.body.style[prefixedProp] !== 'undefined') return prefixedProp;
return prefixedProp
}
} }
return null return null;
} }
``` ```
```js ```js
prefix('transform') prefix('transform'); // 'transform' on a supported browser, otherwise 'webkitTransform' or 'mozTransform' or 'msTransform' or 'oTransform'
// 'transform' on a supported browser
// otherwise 'webkitTransform' or 'mozTransform' or 'msTransform' or 'oTransform'
``` ```