Prefixes a CSS property based on the current browser.

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;
};

prefix('appearance');
// 'appearance' on a supported browser, otherwise 'webkitAppearance', 'mozAppearance', 'msAppearance' or 'oAppearance'

Prefixes a CSS property based on the current browser.
<ul>
<li>Use <a target="_blank" rel="nofollow noopener noreferrer" href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/findIndex" target="_blank" rel="noopener noreferrer"><code class="notranslate">Array.prototype.findIndex()</code></a> on an array of vendor prefix strings to test if <a target="_blank" rel="nofollow noopener noreferrer" href="https://developer.mozilla.org/en-US/docs/Web/API/Document/body" target="_blank" rel="noopener noreferrer"><code class="notranslate">Document.body</code></a> has one of them defined in its <code class="notranslate">CSSStyleDeclaration</code> object, otherwise return <code class="notranslate">null</code>.</li>
<li>Use <a target="_blank" rel="nofollow noopener noreferrer" href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/charAt" target="_blank" rel="noopener noreferrer"><code class="notranslate">String.prototype.charAt()</code></a> and <a target="_blank" rel="nofollow noopener noreferrer" href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/toUpperCase" target="_blank" rel="noopener noreferrer"><code class="notranslate">String.prototype.toUpperCase()</code></a> to capitalize the property, which will be appended to the vendor prefix string.</li>
</ul>

Prefix CSS property

More like this

Inject CSS

URL parameters as object

Hide elements