如何用PostCSS插件转译CSS翻转属性，为旧版浏览器提供兼容性？

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

直接说结论：

常见错误是把两者混用，以为加了 postcss-dir-pseudo 就能兼容老浏览器的逻辑方位——它只生成方向条件规则，不提供 fallback 值。而 postcss-logical 才真正做属性映射和值翻转。

• postcss-logical 支持 margin-inline、padding-block、inset-inline 等全部逻辑方位属性，并按 dir="ltr" 或 dir="rtl" 自动推导物理等价写法
• 它默认不处理 text-align: start/end，需显式开启 preserve: false 才转译（否则保留原逻辑值）
• 若项目已用 postcss-rtl 做整站 RTL 翻转，注意二者冲突：后者会重写所有方位值，建议停用或严格隔离作用域

如何配置 postcss-logical 实现自动翻转？

核心是启用 dir 检测 + 显式声明 fallback 方向。