PostCSS 是一个通过插件自动处理 CSS 兼容性问题的工具，核心插件 autoprefixer 能根据目标浏览器范围自动添加 -webkit-、-moz- 等前缀，开发者只需编写标准 CSS，构建时即可生成兼容多浏览器的样式代码。
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：
采用三层架构开发，前台集成了产品在线展示，用户注册、在线调查、在线投稿后台有类别管理\图书管理\订单管理\会员管理\配送范围管理\邮件列表\广告管理\友情链接管理等后台添加图书时自动生成缩略图和文字水印主要参考了petshop的设计架构、使用了Asp.net2.0中很多MemberShip、master等新功能后台管理地址/web/admin/ 超级管理员账号密码均为aspx1特别提示：该系统需要
.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，而兼容性问题交给工具来解决，提升开发效率的同时保证页面在多浏览器环境下表现一致。
