CSS 网格支持 webpack 上的 autoprefixer

Question

我正在为一个元素使用带有 postcss 和 webpack 的 autoprefixer。我也在使用 CSS 网格。但是，我在构建代码时注意到 css 网格的 ms 前缀不起作用。

这是我的 postcss.config.js，它正在为诸如 flexbox 之类的东西工作。

如何启用 CSS 网格支持？

module.exports = {
  plugins: [
    require('autoprefixer')
  ]
}

Answer 1

默认情况下，autoprefixer 不会为网格属性添加前缀。

参见 autoprefixer documentation:

Autoprefixer has 4 features, which can be enabled or disabled by options:

...

grid: true will enable Grid Layout prefixes for IE.

设置语法 options看起来像:

const autoprefixer = require('autoprefixer');
const plugin = autoprefixer({ grid: true });
module.exports = { plugins: [ plugin ] }

---

也就是说，MDN关于网格属性的自动前缀器有这样的说法:

The popular tool autoprefixer has been updated to support the -ms- grid version when you use the new grid properties. Unless your layout is very simple line-based placement, this is likely to cause you more problems that it solves. I would not suggest letting autoprefixer run on grid properties, and instead write a version using the IE version of Grid Layout, if it makes sense for you.

此外，Rachel Andrew 写道 a thorough post关于这个话题

在那篇文章中，她指出了以下内容:

...even where similar properties exist in the two versions of the specification, the capabilities of the older spec and implementation are very different to the new one. This means you can’t simply run Autoprefixer and consider the job done.