I am currently trying to set up the autoprefixer npm package. I would like to insert some css to see if it adds vendor prefixes as needed. However, I'm not sure what css I would add that would trigger an automatic vendor-specific insert.
How might I figure out what css I could use to confirm that the package is working?
For example, if I am using OSX Chrome v49.x, what would I use?
Autoprefixer is based on Rework, a framework for writing your own CSS postproccesors. Rework parses CSS to useful JavaScript structure and exports it back to CSS after your manipulations. Each version of Autoprefixer contains a copy of latest Can I Use data: List of current browsers and their popularity.
To enable autoprefixing for grid just add this line /* autoprefixer grid: autoplace */ to the top of your css/scss file see create-react-app. dev/docs/post-processing-css. Should do the job :) Thank you!
The devDependencies of autoprefixer are only needed if you are working on autoprefixer itself (that's why they are devDependencies).
From the docs: Run npx autoprefixer --info
in your project directory to check which browsers are selected and which properties will be prefixed:
$ npx autoprefixer --info
Browsers:
Edge: 16
These browsers account for 0.26% of all users globally
At-Rules:
@viewport: ms
Selectors:
::placeholder: ms
Properties:
appearance: webkit
flow-from: ms
flow-into: ms
hyphens: ms
overscroll-behavior: ms
region-fragment: ms
scroll-snap-coordinate: ms
scroll-snap-destination: ms
scroll-snap-points-x: ms
scroll-snap-points-y: ms
scroll-snap-type: ms
text-size-adjust: ms
text-spacing: ms
user-select: ms
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With