Update snippet descriptions

This commit is contained in:
Isabelle Viktoria Maciohsek
2020-10-22 20:24:04 +03:00
parent aedcded750
commit d35575373f
41 changed files with 148 additions and 88 deletions

View File

@ -3,7 +3,7 @@ title: prefix
tags: browser,intermediate
---
Returns the prefixed version (if necessary) of a CSS property that the browser supports.
Prefixes a CSS property based on the current browser.
- Use `Array.prototype.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.prototype.charAt()` and `String.prototype.toUpperCase()` to capitalize the property, which will be appended to the vendor prefix string.
@ -13,12 +13,15 @@ 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'
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'
prefix('appearance');
// 'appearance' on a supported browser, otherwise 'webkitAppearance', 'mozAppearance', 'msAppearance' or 'oAppearance'
```