使用 postcss 配合 autoprefixer 插件可以自动为 css3 属性添加浏览器前缀。只需在构建配置中引入该插件，它会根据 browserslist 指定的目标环境自动处理兼容性问题。
如何配置 PostCSS 以启用自动补全功能
在项目中安装 postcss 和 autoprefixer 依赖后，需要在配置文件（如 postcss.config.js）中注册插件。通过设置 browserslist 字段来定义需要兼容的浏览器范围，插件会据此生成相应的带前缀代码。
const autoprefixer = require('autoprefixer');
module.exports = {
plugins: [
autoprefixer({
overrideBrowserslist: ['last 2 versions', '> 1%', 'not dead']
})
]
};上述配置确保了在处理 CSS 时，PostCSS 会调用 Autoprefixer 的逻辑。当输入包含未加前缀的标准属性时，输出将包含针对指定浏览器的完整前缀版本。
立即学习“前端免费学习笔记（深入）”；
不同浏览器版本对前缀生成的影响
Autoprefixer 的行为完全依赖于 browserslist 的配置。如果目标环境中不包含某些旧版浏览器，相关的前缀就不会被添加。例如，现代浏览器已不再需要 -webkit- 前缀，因此配置仅针对最新浏览器时，这些前缀会被省略。
const postcss = require('postcss');
const autoprefixer = require('autoprefixer');
const css = '.box { display: flex; }';
postcss([autoprefixer])
.process(css, { from: undefined })
.then(result => {
console.log(result.css);
});运行上述代码时，控制台输出的 CSS 将根据当前系统或项目中的 browserslist 数据决定最终样式。若配置了较旧的 iOS 版本，可能会看到 -webkit-box 等旧式语法。
Flex 布局在不同环境下的具体输出差异
以 Flex 布局为例，当输入为 display: flex 时，PostCSS 会根据目标环境生成不同的代码片段。对于支持标准 Flexbox 的现代浏览器，输出保持原样；而对于旧版 WebKit 浏览器，则会生成 -webkit-flex 及相关的旧式属性。
.box {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}这段输出展示了典型的兼容性处理结果。第一行针对旧版 Safari/Chrome，第二行针对 IE10+，第三行为标准语法。开发者无需手动编写这些前缀，工具会自动根据配置插入必要的代码。
