inline-style-prefixer
Advanced tools
The inline-style-prefixer is a JavaScript library used for automatically adding vendor prefixes to CSS styles defined in JavaScript objects. This is particularly useful when developing React applications that handle styles primarily in JavaScript. The prefixer uses the user agent to determine which prefixes are necessary for the current browser, ensuring cross-browser compatibility for CSS properties that require vendor prefixes.
Automatic Prefixing
Automatically adds necessary CSS vendor prefixes to style objects based on the current browser's requirements.
{"display": 'flex'} // becomes {'display': ['-webkit-box', '-moz-box', '-ms-flexbox', '-webkit-flex', 'flex']} after processingUser Agent Based Prefixing
Initializes the prefixer with a specific user agent to tailor the prefixing process to a particular browser's needs.
const prefixer = new Prefixer({userAgent: 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3029.110 Safari/537.36'}); const style = prefixer.prefix({display: 'flex'});Autoprefixer is a more robust solution that integrates with build tools like PostCSS to automatically add vendor prefixes to CSS files. Unlike inline-style-prefixer, which is designed for inline styles in JavaScript, Autoprefixer works with static CSS files, making it suitable for a broader range of web development tasks.
PostCSS-prefixer is a PostCSS plugin that allows developers to add prefixes to CSS properties manually. It requires explicit configuration for each prefix, offering more control but less automation compared to inline-style-prefixer, which automatically determines necessary prefixes.
inline-style-prefixer adds required vendor prefixes to your style object. It only adds prefixes if they're actually required by evaluating the browser's userAgent against data from caniuse.com.
Alternatively it ships a static version that adds all available vendor prefixes.
Support Robin Frischmann's work on Fela and its ecosystem (inline-style-prefixer) directly via Patreon.
Or support us on Open Collective to fund community work. This also includes inline-style-prefixer as well.
Thank you to all our backers!
yarn add inline-style-prefixer
If you're still using npm, you may run npm i --save inline-style-prefixer.
We also provide UMD builds for each package in the dist folder. You can easily use them via unpkg.
<!-- Unminified versions -->
<script src="https://unpkg.com/inline-style-prefixer@3.0.1/dist/inline-style-prefixer.js"></script>
<script src="https://unpkg.com/inline-style-prefixer@3.0.1/dist/inline-style-prefix-all.js"></script>
<!-- Minified versions -->
<script src="https://unpkg.com/inline-style-prefixer@3.0.1/dist/inline-style-prefixer.min.js"></script>
<script src="https://unpkg.com/inline-style-prefixer@3.0.1/dist/inline-style-prefix-all.min.js"></script>
It supports all major browsers with the following versions. For other, unsupported browses, we automatically use a fallback.
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.
Before using the prefixer, you have to decide which one you want to use. We ship two different versions - a dynamic and a static version.
The dynamic prefixer evaluates the userAgent to identify the browser environment. Using this technique, we are able to only add the bare minimum of prefixes. Browser detection is quite accurate (~90% correctness), but yet also expensive which is why the package is almost 3 times as big as the static version.
It uses the static prefixer as a fallback.
import Prefixer from 'inline-style-prefixer'
const style = {
transition: '200ms all linear',
userSelect: 'none',
boxSizing: 'border-box',
display: 'flex',
color: 'blue'
}
const prefixer = new Prefixer()
const prefixedStyle = prefixer.prefix(style)
// prefixedStyle === output
const output = {
transition: '200ms all linear',
WebkitUserSelect: 'none',
boxSizing: 'border-box',
display: '-webkit-flex',
color: 'blue'
}
The static prefixer, on the other hand, adds all required prefixes according the above mentioned browser versions. Removing the browser detection makes it both smaller and fast, but also drastically increases the output.
import prefixAll from 'inline-style-prefixer/static'
const style = {
transition: '200ms all linear',
boxSizing: 'border-box',
display: 'flex',
color: 'blue'
}
const prefixedStyle = prefixAll(style)
// prefixedStyle === output
const 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'
}
You can use TypeScript definition from DefinitelyTyped using @types/inline-style-prefixer
npm install --save @types/inline-style-prefixer
Then import in your code:
import prefixAll = require('inline-style-prefixer/static');
const prefixedStyle = prefixAll({
transition: '200ms all linear',
boxSizing: 'border-box',
display: 'flex',
color: 'blue'
});
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!
Join us on Gitter. We highly appreciate any contribution.
We also love to get feedback.
inline-style-prefixer is licensed under the MIT License.
Documentation is licensed under Creative Common License.
Created with ♥ by @rofrischmann and all contributors.
4.0.0
FAQs
Run-time Autoprefixer for JavaScript style objects
The npm package inline-style-prefixer receives a total of 1,975,091 weekly downloads. As such, inline-style-prefixer popularity was classified as popular.
We found that inline-style-prefixer demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Node.js will be enforcing stricter semver-major PR policies a month before major releases to enhance stability and ensure reliable release candidates.
Security News
Research
Socket's threat research team has detected five malicious npm packages targeting Roblox developers, deploying malware to steal credentials and personal data.
Security News
vlt introduced its new package manager and a serverless registry this week, innovating in a space where npm has stagnated.