如何通过PostCSS插件在CSS中实现现代语法转换，以兼容老旧浏览器？

本文共计1026个文字，预计阅读时间需要5分钟。

PostCSS 本身不转换语法，它是一个平台；真正干活的是插件。您写的 `display: grid;` 或 `color: hsl(200 50% 50%);` 代码能否变成兼容老浏览器的代码，取决于您使用的插件。

例如，您可以使用 Autoprefixer 插件来兼容老浏览器。以下是配置示例：

• autoprefixer 必装——它读 browserslist 配置，自动加前缀，比如把 transform 补上 -webkit-transform
• postcss-preset-env 可选但推荐——它打包了多个语法降级能力（如 nesting、custom-properties），但注意：它默认只处理“已进入 W3C 候选推荐”的特性，aspect-ratio 这类新属性要手动开 stage: 3
• 别乱装 postcss-cssnext——它已废弃，和 postcss-preset-env 功能重叠，混用会冲突

配置文件里 browserslist 写错，autoprefixer 就等于没开

很多人以为装了 autoprefixer 就万事大吉，结果打包出来还是有 gap、inset 这种不兼容属性。问题大概率出在 browserslist 没生效或写得太宽泛。