22

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?

3
  • Why the downvote? Please provide a comment and not just negative feedback, so that I can improve the question.
    – andersr
    Commented Apr 9, 2016 at 21:04
  • 1
    This could help. Also just install an old browser and test with it.
    – Aziz
    Commented Apr 9, 2016 at 23:31
  • Yes, I looked at 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
    Commented Apr 10, 2016 at 15:23

4 Answers 4

24

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
1
  • This doesn't so much check that autoprefixer is working as much as it validates your browserslist config, just like browsersl.ist. npx works by running a temporarily installed version of a package, which it runs on your current browserslist.rc or string. It doesn't verify that your package will install autoprefixer or that your build system will actually run it. Commented Sep 6, 2023 at 1:38
9

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!

0
1

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

0

https://autoprefixer.github.io/

other autoprefixer good tool

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.