https://github.com/awcross/pfx

Browser vendor prefix helper
https://github.com/awcross/pfx

browser css helper js prefix vendor web

Last synced: about 11 hours ago
JSON representation

Browser vendor prefix helper

• Host: GitHub
• URL: https://github.com/awcross/pfx
• Owner: awcross
• License: mit
• Created: 2017-01-12T23:13:23.000Z (almost 8 years ago)
• Default Branch: master
• Last Pushed: 2017-01-14T00:39:59.000Z (almost 8 years ago)
• Last Synced: 2024-11-13T15:54:23.666Z (6 days ago)
• Topics: browser, css, helper, js, prefix, vendor, web
• Language: JavaScript
• Homepage:
• Size: 12.7 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: readme.md
  • License: license

Awesome Lists containing this project

README

        
# pfx [![Build Status](https://travis-ci.org/awcross/pfx.svg?branch=master)](https://travis-ci.org/awcross/pfx)

> Browser vendor prefix helper

Inspired by `Modernizr.prefixed` and `Modernizr.prefixedCSS` from [Modernizr](https://modernizr.com).

## Install

```

$ npm install --save pfx

```

## Usage

```js

const pfx = require('pfx');

const boxReflect = pfx('boxReflect');

// boxReflect === 'WebkitBoxReflect' in Webkit browsers

const transition = pfx('transition');

// transition === 'MozTransition' in old Firefox

```

By default, the property is checked against a DOM element. If you want to check against a different element, pass it in as the second argument.

```js

const rAF = pfx('requestAnimationFrame', window);

// rAF === 'MozRequestAnimationFrame' in old Firefox

```

You can also get the *function* by passing in the value `true` as the third argument.

```js

const rAF = pfx('requestAnimationFrame', window, true);

// typeof rAF === 'function'

rAF(() => {

	// do something

});

```

If you want to get the hyphenated form to use with css, you can use the following syntax.

```js

const boxReflect = pfx.css('boxReflect');

// boxReflect === '-webkit-box-reflect' for Webkit browsers

```

## API

### pfx(prop [, element] [, function])

Takes a string in camelCase style and returns the version of the property that the browser supports.

#### prop

Type: `string`

#### element

Type: `object`

#### function

Type: `boolean` `object`

## Related

- [pfx-animation](https://github.com/awcross/pfx-animation) - Browser prefix helper for animation event

- [pfx-transition](https://github.com/awcross/pfx-transition) - Browser prefix helper for transition event

## License

MIT © [Alex Cross](https://alexcross.io)