postcss autoprefixer 忽略带有 gulp 的网格属性

Question

我正在使用 autoprefixer 和 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 has 4 features, which can be enabled or disabled by options:

supports: false will disable @supports parameters prefixing.

flexbox: false will disable flexbox properties prefixing. Or flexbox: "no-2009" will add prefixes only for final and IE versions of specification.

remove: false will disable cleaning outdated prefixes.

grid: true will enable Grid Layout prefixes for IE.

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

编辑：比你的问题和回答更进一步 "What can I do with browsers supporting the old first Grid Layout spec introduced with IE10?":

useful table 来自 Rachel Andrew 关于 "IE 10-Edge 15" vs "modern browsers and Edge 16+" 网格属性，如果你想手动完成或验证 Autoprefixer 是否正确。
如果您想为这 2 类浏览器分开 CSS，您可以使用 Morten Rand-Hendriksen 在 SmashingMag 中的 Building Production-Ready CSS Grid Layouts Today 文章中的 gem： @supports (grid-area: auto) { /* */ }

但 @supports (display: grid) {} 不行，唉（见文章）。

postcss autoprefixer 忽略带有 gulp 的网格属性

postcss autoprefixer ignoring grid properties with gulp

css

sass

gulp

postcss