<p>PostCSS 是一个通过插件自动处理 CSS 兼容性问题的工具，核心插件 autoprefixer 能根据目标浏览器范围自动添加 -webkit-、-moz- 等前缀，开发者只需编写标准 CSS，构建时即可生成兼容多浏览器的样式代码。</p>
CSS 在不同浏览器中的兼容性问题一直存在，尤其是使用较新的 CSS 特性时，某些浏览器需要特定的前缀才能正确解析和渲染样式。PostCSS 是一个强大的工具，能够通过插件机制自动处理这些问题，其中最典型的应用就是自动添加浏览器前缀。
什么是 PostCSS？
PostCSS 是一个用 JavaScript 转换 CSS 的工具。它本身不直接提供功能，而是通过插件扩展能力。开发者可以利用这些插件对 CSS 进行语法转换、变量支持、嵌套规则优化以及最重要的——自动补全浏览器厂商前缀。
如何用 PostCSS 自动添加前缀
实现自动添加前缀的核心插件是 autoprefixer。它基于 Can I Use 的数据，分析 CSS 规则，并根据目标浏览器范围自动添加必要的 -webkit-、-moz-、-ms- 等前缀。
基本使用步骤如下：
立即学习“前端免费学习笔记（深入）”；
- 安装 PostCSS 和 autoprefixer：
npm install postcss autoprefixer --save-dev - 配置目标浏览器范围（可在 package.json 中设置）：
"browserslist": ["> 1%", "last 2 versions"] - 在构建流程中调用 PostCSS 处理 CSS 文件，例如结合 Webpack、Vite 或独立的 postcss-cli 工具。
实际效果示例
假设你写了以下现代 CSS：
.example {
display: flex;
transition: all 0.3s;
user-select: none;
}
经过 PostCSS + autoprefixer 处理后，输出可能变为：
.example {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-transition: all 0.3s;
transition: all 0.3s;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
这样就能确保在老版本 Chrome、Firefox、Safari 或 Edge 中正常运行。
与现代开发流程集成
大多数现代前端框架（如 React、Vue）的脚手架工具已经内置了 PostCSS 支持。只要项目中有 postcss.config.js 配置文件，并启用了 autoprefixer 插件，CSS 前缀就会在构建时自动处理，无需手动干预。
基本上就这些。合理配置 PostCSS 后，你可以专注于写标准 CSS，而兼容性问题交给工具来解决，提升开发效率的同时保证页面在多浏览器环境下表现一致。
