30-seconds-of-code/snippets/prefix.md

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.

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
}

prefix('transform')
// 'transform' on a supported browser
// otherwise 'webkitTransform' or 'mozTransform' or 'msTransform' or 'oTransform'