Question

我正在使用autoprefixer with gulp为属性添加浏览器渲染前缀。但似乎autoprefixer忽略了所有的网格属性。

gulp.task('postcss',function() {

  console.log("Running postcss task");
  var plugins = [autoprefixer({browsers: "last 5 versions"}),orderValues()];
  return gulp.src('www/css/*.css')
              .pipe(postcss(plugins,{ map:true , inline:true }))
              .pipe(gulp.dest("www/css/"));

});

Answer 1

默认情况下禁用此功能。您需要在使用grid: true

给Autoprefixer的选项中启用它

Documentation of Autoprefixer

Autoprefixer有4个功能，可以通过选项启用或禁用：


支持：false将禁用@supports参数前缀。

flexbox：false将禁用flexbox属性前缀。或者flexbox：“no-2009”将仅为最终版本和IE版本的规范添加前缀。

remove：false将禁用清除过期的前缀。

grid：true将为IE启用网格布局前缀。

决定是在Twitter上投票后做出的（问题#817），其背后的原因是IE10-11和Edge 12-15中实施的旧网格规范与实施的现有规范有太大不同在Chr，Fx，Saf（？）和传入的边缘16.
您需要更多手动工作才能在IE10-Edge 15上获得相同的结果，要么是后备还是要限制使用不受支持的属性（grid-area等）和值（repeat()我认为等）：在这两种情况下，它都不能由Autoprefixer自动完成，所以nope，默认情况下禁用。

编辑：比你的问题走得更远并回答“我能用浏览器支持IE10引入的旧的第一个Grid Layout规范吗？”：

useful table来自Rachel Andrew的“IE 10-Edge 15”vs“现代浏览器和Edge 16+”网格属性，如果您想手动执行或验证Autoprefixer是否正确执行。
如果你想为这两类浏览器分开CSS，你可以使用Morten Rand-Hendriksen的SmashingMag中的Building Production-Ready CSS Grid Layouts Today文章中的这个宝石： @supports (grid-area: auto) { /* */ }

但不是@supports (display: grid) {}，这不会起作用（见文章）。

postcss autoprefixer用gulp忽略网格属性

1 个答案: