PostCSS 和 Autoprefixer 怎么配置？CSS 兼容性怎么处理？

Question

仓乃文 · Accepted Answer

CSS 兼容性的核心问题是浏览器前缀（-webkit-、-moz- 等）和新特性的降级处理。手动写前缀既容易遗漏又难维护，Autoprefixer 根据 browserslist 自动添加，PostCSS 则提供更广泛的 CSS 转换能力。

基础配置：
```javascript
// postcss.config.js
module.exports = {
  plugins: {
    "postcss-preset-env": {
      stage: 3,
      features: {
        "nesting-rules": true,
      },
    },
    autoprefixer: {
      overrideBrowserslist: [
        "> 1%",
        "last 2 versions",
        "not dead",
        "iOS >= 13",
      ],
    },
    "cssnano": {},
  },
};
```

browserslist 配置：
```
# .browserslistrc
> 1%
last 2 versions
not dead
iOS >= 13
Android >= 5
not ie <= 11
```

效果对比：
```css
/* 源码 */
.container {
  display: flex;
  user-select: none;
  backdrop-filter: blur(10px);
}

/* Autoprefixer 处理后 */
.container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
}
```

补充说明：
- browserslist 是 Autoprefixer、Babel、ESLint 等工具共享的浏览器目标配置，一处配置多处生效
- postcss-preset-env 可以使用未来的 CSS 特性（如嵌套、自定义媒体查询），类似 Babel 之于 JS
- Vite 项目默认已集成 PostCSS 和 Autoprefixer，只需配置 browserslist 即可
- 如果用了 Tailwind CSS，它内部已集成 Autoprefixer，不需要重复配置