How can I test if an autoprefixer is working?

Question

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?

Why the downvote? Please provide a comment and not just negative feedback, so that I can improve the question. — andersr, Apr 09 '16 at 21:04
[This](http://shouldiprefix.com/) could help. Also just install an old browser and test with it. — Aziz, Apr 09 '16 at 23:31
Yes, I looked at http://shouldiprefix.com/ but how would I apply the informaiton in that list to do an autoprefix test? Also, I like the idea of using an old browser, though rather than install it, which I think could create headaches, I'm thinking maybe use a service, like browserstack. Anyway, that seems like the right way to go. Thx! — andersr, Apr 10 '16 at 15:23

score 22 · Answer 1 · answered Jan 13 '19 at 21:26

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

score 8 · Answer 2 · answered Dec 04 '16 at 22:51

I am new to gulp and wanted to test that my file was working as well. I utilized the options object in the autoprefixer function to (temporarily) set my requirements to support some old browser versions. They would need a prefix for certain CSS properties, such as 'linear-gradient'. Code below:

gulpfile.js

var gulp = require('gulp');
var autoprefixer = require('gulp-autoprefixer');

gulp.task('prefix', function() {
  return gulp.src("app/css/**/*.css")
  .pipe(autoprefixer({ browsers: ['IE 6','Chrome 9', 'Firefox 14']}))
  .pipe(gulp.dest("app/css"));
});

Before autoprefix, app/css/styles.css:

html, body {
  height: 100%;
  margin: 0;
  height: 0;
  display: flex;
  background: linear-gradient(#e98a00, #f5aa2f);

After, app/css/styles.css:

html, body {
  height: 100%;
  margin: 0;
  height: 0;
  display: -webkit-box;
  display: -moz-box;
  display: flex;
  background: -webkit-gradient(linear, left top, left bottom, from(#e98a00), to(#f5aa2f));
  background: -moz-linear-gradient(#e98a00, #f5aa2f);
  background: linear-gradient(#e98a00, #f5aa2f); }

Working!

score 2 · Answer 3 · answered Dec 04 '16 at 23:42

2

Autoprefixer use http://caniuse.com database, so you can also check all properties there.

For example transition: and transform: are those that I usually debug with

answered Dec 04 '16 at 23:42

Sergey Khmelevskoy

2,429
3
19
43

score 0 · Answer 4 · answered Jun 28 '18 at 10:39

0

https://autoprefixer.github.io/

other autoprefixer good tool

http://browserl.ist/?q=%3E+1%25%2C+Last+2+versions

answered Jun 28 '18 at 10:39

Fatih Hayrioğlu

3,458
1
26
46

How can I test if an autoprefixer is working?

4 Answers4