inline-style-prefixer
A small, simple and fast vendor prefixer from JavaScript style object.
![npm version](https://badge.fury.io/js/inline-style-prefixer.svg)
Installation
yarn add inline-style-prefixer
If you're still using npm, you may run npm i --save inline-style-prefixer
.
Browser Support
It supports all major browsers with the following versions. For other, unsupported browses, we automatically use a fallback.
- Chrome: 55+
- Android (Chrome): 55+
- Android (Stock Browser): 5+
- Android (UC): 11+
- Firefox: 52+
- Safari: 13+
- iOS (Safari): 13+
- Opera: 30+
- Opera (Mini): 12+
- IE: 11+
- IE (Mobile): 11+
- Edge: 12+
It will only add prefixes if a property still needs them in one of the above mentioned versions.
Therefore, e.g. border-radius
will not be prefixed at all.
Need to support legacy browser versions?
Don't worry - we got you covered. Check this guide.
Usage
import { prefix } from 'inline-style-prefixer'
const style = {
transition: '200ms all linear',
boxSizing: 'border-box',
display: 'flex',
color: 'blue'
}
const output = prefix(style)
output === {
WebkitTransition: '200ms all linear',
transition: '200ms all linear',
MozBoxSizing: 'border-box',
boxSizing: 'border-box',
display: [ '-webkit-box', '-moz-box', '-ms-flexbox', '-webkit-flex', 'flex' ]
color: 'blue'
}
Usage with TypeScript
You can use TypeScript definition from DefinitelyTyped using @types/inline-style-prefixer
yarn add @types/inline-style-prefixer
npm i --save @types/inline-style-prefixer
Documentation
If you got any issue using this prefixer, please first check the FAQ's. Most cases are already covered and provide a solid solution.
Here are some popular users of this library:
PS: Feel free to add your solution!
Support
Join us on Gitter. We highly appreciate any contribution.
We also love to get feedback.
License
inline-style-prefixer is licensed under the MIT License.
Documentation is licensed under Creative Common License.
Created with ♥ by @rofrischmann and all contributors.