Prefix CSS property

JavaScript, Browser · Oct 22, 2020

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'

More like this

  • Inject CSS

    JavaScript, Browser

    Injects the given CSS code into the current document

  • URL parameters as object

    JavaScript, Browser

    Creates an object containing the parameters of the current URL.

  • Hide elements

    JavaScript, Browser

    Hides all the elements specified.