Prefix CSS property
JavaScript, Browser · Oct 22, 2020
Prefixes a CSS property based on the current browser.
- Use
Array.prototype.findIndex()on an array of vendor prefix strings to test ifDocument.bodyhas one of them defined in itsCSSStyleDeclarationobject, otherwise returnnull. - Use
String.prototype.charAt()andString.prototype.toUpperCase()to capitalize the property, which will be appended to the vendor prefix string.
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'
