如何测试autoprefixer是否正常工作？

Question

我目前正在尝试设置autoprefixer npm包.我想插入一些css,看看它是否根据需要添加了供应商前缀.但是,我不确定我会添加什么css会触发特定于供应商的自动插入.

我怎么能弄清楚用什么css来确认包是否有效？

例如,如果我使用OSX Chrome v49.x,我会使用什么？

Answer 1

在docs中：npx autoprefixer --info在您的项目目录中运行，以检查选择了哪些浏览器以及哪些属性将带有前缀：

$ 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

Answer 2

我是gulp的新手,想测试我的文件是否正常工作.我利用autoprefixer函数中的options对象(暂时)设置我的需求以支持一些旧的浏览器版本.他们需要某些CSS属性的前缀,例如"线性渐变".代码如下:

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"));
});

在autoprefix之前,app/css/styles.css:

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

之后,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); }

工作!