postcss autoprefixer 使用 gulp 忽略网格属性答案

【问题标题】：postcss autoprefixer ignoring grid properties with gulppostcss autoprefixer 使用 gulp 忽略网格属性
【发布时间】：2018-02-13 10:27:18
【问题描述】：

我正在使用带有 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/"));

});

【问题讨论】：

标签： css sass gulp postcss

【解决方案1】：

默认情况下禁用此功能。您需要在 Autoprefixer 的选项中使用grid: true 启用它

Documentation of Autoprefixer

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

supports: false 将禁用@supports 参数前缀。

flexbox: false 将禁用 flexbox 属性前缀。或者 flexbox: "no-2009" 只会为规范的最终版本和 IE 版本添加前缀。

remove: false 将禁用清理过时的前缀。

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

该决定是在 Twitter 上投票后做出的（问题 #817），其背后的原因是在 IE10-11 和 Edge 12-15 中实现的旧 Grid 规范与在 Chr 中实现的现代规范相差太大、Fx、Saf (?) 和传入的 Edge 16。
您需要更多的手动工作才能在 IE10-Edge 15 上获得等效的结果，或者是回退或限制使用不受支持的属性（grid-area 等）和值（repeat() 我认为等）：在这两种情况下，它Autoprefixer 不能自动完成所以不，默认禁用。

编辑：比您的问题更进一步并回答“我可以用支持 IE10 引入的旧的第一个网格布局规范的浏览器做什么？”：

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

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

【讨论】：