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-等前缀。安装命令如下：

java-api-doc-generator

分析 Java Spring Boot 后端 Controller 代码，自动生成 Markdown 格式的接口文档。当用户说“生成 Java 接口文档”、“生成 API 文档”、“从 Spring 代码生成文档”时触发。

下载

npm install autoprefixer --save-dev

插件会读取项目中的浏览器目标（browserslist），决定需要支持哪些前缀。可在 package.json 中定义目标浏览器范围：

"browserslist": [ "> 1%", "last 2 versions", "not dead" ]

例如，使用 transform 属性时：

.example { transform: rotate(15deg); }

经过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兼容处理变得自动化和可维护，是现代项目推荐的标准实践。