inline-style-prefixer

What is inline-style-prefixer?

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.

What are inline-style-prefixer's main functionalities?

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 processing

User 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'});

Other packages similar to inline-style-prefixer

autoprefixer

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

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.

README

inline-style-prefixer

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.

Installation

npm i --save inline-style-prefixer

Assuming you are using npm as your package mananger you can npm install all packages.
Otherwise we also provide UMD builds for each package within the dist folder. You can easily use them via unpkg.

<!-- Unminified versions -->
<script src="https://unpkg.com/inline-style-prefixer@2.0.4/dist/inline-style-prefixer.js"></script>
<script src="https://unpkg.com/inline-style-prefixer@2.0.4/dist/inline-style-prefix-all.js"></script>
<!-- Minified versions -->
<script src="https://unpkg.com/inline-style-prefixer@2.0.4/dist/inline-style-prefixer.min.js"></script>
<script src="https://unpkg.com/inline-style-prefixer@2.0.4/dist/inline-style-prefix-all.min.js"></script>

Browser Support

Supports the major browsers with the following versions.
For legacy support check custom build. We do not officially support any other browsers.
It will only add prefixes if a property still needs them in one of the following browser versions.This means e.g. border-radius will not be prefixed at all.

• Chrome: 30+
• Safari: 6+
• Firefox: 25+
• Opera: 13+
• IE: 9+
• Edge 12+
• iOS: 6+
• Android: 4+
• IE mobile: 9+
• Opera mini: 5+
• Android UC: 9+
• Android Chrome: 30+

Fallback

If using an unsupported browser or even run without any userAgent, it will use inline-style-prefixer/static as a fallback.

Example

import Prefixer from 'inline-style-prefixer'

const styles = {
  transition: '200ms all linear',
  userSelect: 'none',
  boxSizing: 'border-box',
  display: 'flex',
  color: 'blue'
}

const prefixer = new Prefixer({ userAgent: 'Mozilla/5.0 (Windows NT 6.1) AppleWebKit/537.2 (KHTML, like Gecko) Chrome/25.0.1216.0 Safari/537.2'})
const prefixedStyles = prefixer.prefix(styles)

// prefixedStyles === output
const output = {
  transition: '200ms all linear',
  WebkitUserSelect: 'none',
  boxSizing: 'border-box',
  display: '-webkit-flex',
  color: 'blue'
}

inline-style-prefixer/static

If you only want to use the static version, you can import it directly to reduce file size. It was once shipped as a several package inline-style-prefix-all.

import prefixAll from 'inline-style-prefixer/static'

const styles = {
  transition: '200ms all linear',
  boxSizing: 'border-box',
  display: 'flex',
  color: 'blue'
}

const prefixedStyles = prefixAll(styles)

// prefixedStyles === output
const output = {
  WebkitTransition: '200ms all linear',
  // Firefox dropped prefixed transition with version 16
  // IE never supported prefixed transitions
  transition: '200ms all linear',
  MozBoxSizing: 'border-box',
  // Firefox up to version 28 needs a prefix
  // Others dropped prefixes out of scope
  boxSizing: 'border-box',
  // Fallback/prefixed values get grouped in arrays
  // The prefixer does not resolve those
  display: [ '-webkit-box', '-moz-box', '-ms-flexbox', '-webkit-flex', 'flex' ]
  color: 'blue'
}

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.

• API Reference
• Supported Properties
• Special Plugins
• FAQ

Custom Build & Legacy Support

You may have to create a custom build if you need older browser versions. Just modify the config.js file which includes all the browser version specifications.

npm install
npm run build

License

inline-style-prefixer is licensed under the MIT License.
Documentation is licensed under Creative Common License.
Created with ♥ by @rofrischmann.

Changelog

2.0.5

• added style sorting to prepend prefixed properties ( #105 )
• support for position: -webkit-sticky ( #103 )