Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How can I test if an autoprefixer is working?

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?

like image 694
andersr Avatar asked Apr 09 '16 20:04

andersr


People also ask

What is the use of Autoprefixer?

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.

How do I use Autoprefixer With react?

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!

Is Autoprefixer a dev dependency?

The devDependencies of autoprefixer are only needed if you are working on autoprefixer itself (that's why they are devDependencies).


1 Answers

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
like image 190
Dave Romsey Avatar answered Sep 19 '22 14:09

Dave Romsey