PostCSS结合Autoprefixer可自动添加CSS厂商前缀，通过配置插件和browserslist目标，集成到Webpack等构建工具中，实现开发时书写标准CSS、构建时自动处理兼容性，提升效率。
在现代前端开发中，CSS新特性虽然强大，但浏览器兼容性问题依然存在。使用PostCSS结合Autoprefixer插件，可以自动为CSS属性添加厂商前缀，确保样式在不同浏览器中正常工作。整个过程无缝集成到构建流程中，提升开发效率。
配置PostCSS处理CSS
PostCSS是一个用JavaScript转换CSS的工具，它本身不直接修改样式，而是通过插件实现功能。要使用它，先安装依赖：
npm install postcss postcss-cli --save-dev接着创建一个配置文件 postcss.config.js，定义插件链：
module.exports = { plugins: [ require('autoprefixer') ] }这样，PostCSS会在处理CSS时调用Autoprefixer插件。
立即学习“前端免费学习笔记（深入）”；
安装并配置Autoprefixer
Autoprefixer根据Can I Use的数据，自动为CSS规则添加-webkit-、-moz-、-ms-等前缀。安装命令如下：
npm install autoprefixer --save-dev插件会读取项目中的浏览器目标（browserslist），决定需要支持哪些前缀。可在 package.json 中定义目标浏览器范围：
"browserslist": [ "> 1%", "last 2 versions", "not dead" ]
例如，使用 transform 属性时：
经过Autoprefixer处理后会变成：
.example { -webkit-transform: rotate(15deg); -ms-transform: rotate(15deg); transform: rotate(15deg); }集成到构建工具中
PostCSS可与Webpack、Vite、Gulp等工具结合。以Webpack为例，使用 postcss-loader：
module: { rules: [ { test: /\.css$/, use: ['style-loader', 'css-loader', 'postcss-loader'] } ] }只要配置完成，每次构建时都会自动处理兼容性。开发时只需写标准CSS语法，无需关心前缀问题。
基本上就这些。PostCSS + Autoprefixer组合让CSS兼容处理变得自动化和可维护，是现代项目推荐的标准实践。
