Skip to main content

prefix

TS JS Deno

Returns the prefixed version (if necessary) of a CSS property that the browser supports.

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.

typescript
const prefix = (prop: string) => {
  const capitalizedProp = prop.charAt(0).toUpperCase() + prop.slice(1);
  const prefixes = ["", "webkit", "moz", "ms", "o"];
  const i = prefixes.findIndex(
    (prefix) =>
      typeof (document.body.style as any)[
        prefix ? prefix + capitalizedProp : prop
      ] !== "undefined"
  );
  return i !== -1 ? (i === 0 ? prop : prefixes[i] + capitalizedProp) : null;
};
typescript
prefix("appearance"); // 'appearance' on a supported browser, otherwise 'webkitAppearance', 'mozAppearance', 'msAppearance' or 'oAppearance'