npm install auto-prefixerjavascript
var prefixedStyle = autoprefix(stylesObject);
``
$3
`javascript
import autoprefix from 'autoprefix';
var Component = React.createClass({
render() {
return (
auto-prefixes with every render (suitable when state/props changes style)
styleSheet will only be auto-prefixed once on mount - more performant
works also when nested
)
}
styleSheet: autoprefix({
style1:{
justifyContent: 'space-between',
overflow: 'auto',
flexShrink: 0
},
style2:{
nested1:{
display: 'flex',
width: 'calc(100% - 10px)'
}
}
})
})
`
$3
By default, it will add prefixes only for the client's browser. When doing server rendering of a react page, you should add prefixes for every relevant browser. that's really easy -
`javascript
var prefixedStyle = autoprefix(stylesObject, true);
// or - even easier, when requiring autoprefix, do this:
var autoprefix = require('autoprefix')(true);
``
Supports:
- flex:
- display: flex
- alignContent
- alignItems
- alignSelf
- flex
- flexBasis
- flexDirection
- flexFlow
- flexGrow
- flexShrink
- flexWrap
- justifyContent
- old flex box (new flex properties are transformed automatically)
- animation, and its sub properties::
- Delay
- Direction
- Duration
- FillMode
- IterationCount
- Name
- PlayState
- TimingFunction
- appearance
- backfaceVisibility
- backgroundClip
- borderImage, borderImageSlice
- boxShadow
- boxSizing
- calc
- clipPath
- columns
- cursor
- fontSmoothing
- order
- perspective, perspectiveOrigin
- transform, and its sub properties:
- Origin
- OriginX
- OriginY
- OriginZ
- Style
- transition, and its sub properties:
- Delay
- Duration
- Property
- TimingFunction
- userSelect
$3
`sh
$ npm install auto-prefixer --save
``