CSS 网格支持 webpack 上的 autoprefixer

标签 css webpack internet-explorer-11 css-grid postcss

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

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

如何启用 CSS 网格支持?

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

最佳答案

默认情况下,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.

关于CSS 网格支持 webpack 上的 autoprefixer,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47305238/

相关文章:

javascript - 多个宽度同时动画,达到100%

javascript - 无法通过 JavaScript 更改 <DIV> 的 css 可见性

typescript - 即使不需要模块,Webpack 也会为 node_modules 中的文件提供 "Module has no exported member..."错误

javascript - 使用 Babel 的 `sourceRoot` 不影响导入

Webpack.config如何将index.html复制到dist文件夹

asp.net-mvc-4 - 无法从 IE11 登录 Web 应用程序

JavaScript RegExp 在 IE11 中不工作,在 Chrome 中工作

html - IE11 Flexbox 布局在滚动容器中损坏

html - html表格内的自动滚动文本

javascript - 删除 :before or :after CSS element and it's property with Jquery