使用PostCSS配合Autoprefixer和postcss-preset-env插件，根据browserslist配置自动添加厂商前缀并降级现代CSS特性，通过webpack等构建工具集成，实现CSS兼容旧浏览器。
PostCSS 是一个强大的 CSS 处理工具，它本身不直接添加浏览器前缀或做兼容处理，而是通过插件机制实现功能扩展。要让 CSS 自动兼容旧版浏览器，关键是使用合适的 PostCSS 插件来处理厂商前缀和缺失的 CSS 特性（Polyfill）。下面介绍如何配置 PostCSS 实现这一目标。
安装并配置 PostCSS
PostCSS 通常与构建工具（如 Webpack、Vite 或 Gulp）配合使用。先安装 PostCSS 核心库：
npm install postcss postcss-cli --save-dev接着在项目根目录创建 postcss.config.js 文件，用于定义插件和配置。
使用 Autoprefixer 添加厂商前缀
Autoprefixer 是最常用的 PostCSS 插件之一，它根据你指定的目标浏览器自动为 CSS 属性添加必要的厂商前缀（如 -webkit-、-moz- 等）。
立即学习“前端免费学习笔记（深入）”；
安装插件：
npm install autoprefixer --save-dev在 postcss.config.js 中启用它：
module.exports = { plugins: [ require('autoprefixer') ] }Autoprefixer 会读取 package.json 中的 browserslist 字段来决定需要支持哪些浏览器。例如：
"browserslist": [ "> 1%", "last 2 versions", "not dead", "ie >= 11" ]这样配置后，PostCSS 会在构建时自动为 flexbox、transform、animation 等属性添加所需的前缀。
使用 postcss-preset-env 实现 CSS 新特性 Polyfill
如果你希望使用较新的 CSS 语法（如 custom properties、nesting、:is() 选择器等），但又要兼容不支持这些特性的旧浏览器，可以使用 postcss-preset-env。
它能将现代 CSS 转换为广泛兼容的写法，相当于 CSS 层面的 Babel。
安装：
npm install postcss-preset-env --save-dev配置：
module.exports = { plugins: [ require('postcss-preset-env')({ stage: 3, features: { 'nesting-rules': true, 'custom-properties': true } }) ] }这个插件会根据 browserslist 配置，将新语法降级为旧浏览器可识别的形式，比如把嵌套规则展开，或将 CSS 变量转换为固定值（如果目标浏览器不支持）。
集成到构建流程中
以 Webpack 为例，使用 postcss-loader 将 PostCSS 接入：
module: { rules: [ { test: /\.css$/, use: ['style-loader', 'css-loader', 'postcss-loader'] } ] }只要配置好插件和 browserslist，每次构建时 PostCSS 就会自动处理兼容性问题。
基本上就这些。合理使用 Autoprefixer 和 postcss-preset-env，配合清晰的浏览器支持策略，就能让现代 CSS 代码在旧版浏览器中稳定运行，无需手动维护前缀或降级逻辑。关键在于配置准确，避免过度兼容影响性能。
