19

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

我怎样才能弄清楚我可以使用什么 css 来确认包是否正常工作？

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

4

4 回答 4

16

从文档：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
于 2019-01-13T21:26:52.957 回答
7

我是 gulp 的新手，想测试我的文件是否也能正常工作。我利用 autoprefixer 函数中的选项对象（临时）设置我的要求以支持一些旧的浏览器版本。它们需要某些 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"));
});

在自动前缀之前，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); }

在职的！

于 2016-12-04T22:51:46.647 回答
2

Autoprefixer 使用http://caniuse.com数据库，因此您还可以检查那里的所有属性。

例如 transition: 和 transform: 是我通常调试的那些

于 2016-12-04T23:42:29.480 回答
0

https://autoprefixer.github.io/

其他 autoprefixer 好工具

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

于 2018-06-28T10:39:08.220 回答