Question

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

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

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

Answer 1

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

<强> gulpfile.js

public IServiceProvider ConfigureServices(IServiceCollection services)
{
    // Add framework services.
    services.AddMvc()
        .AddControllersAsServices();

    return ConfigureIoC(services);
}

public IServiceProvider ConfigureIoC(IServiceCollection services)
    {
        var container = new Container();

        container.Configure(config =>
        {
            // Register stuff in container, using the StructureMap APIs...
            config.Scan(_ =>
            {
                _.AssemblyContainingType(typeof(Startup));
                _.WithDefaultConventions();
                _.AddAllTypesOf<IGamingService>();
                _.ConnectImplementationsToTypesClosing(typeof(IValidator<>));
            });

            config.For(typeof(IValidator<>)).Add(typeof(DefaultValidator<>));
            config.For(typeof(ILeaderboard<>)).Use(typeof(Leaderboard<>));
            config.For<IUnitOfWork>().Use(_ => new UnitOfWork(3)).ContainerScoped();

            //Populate the container using the service collection
            config.Populate(services);
        });

        return container.GetInstance<IServiceProvider>();

    }
}

在自动修复之前， app / css / styles.css ：

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

工作！

Answer 2

在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 3

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

例如transition：和transform：是我通常用

调试的那些

Answer 4

https://autoprefixer.github.io/

其他自动前缀工具的好工具

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

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

4 个答案: