margin-inline-start 无反应是因为它仅响应显式 dir="rtl" 或 CSS direction 声明，不读取 lang 属性或浏览器语言设置；漏写 <html dir="rtl"> 会导致其退化为 margin-left。
为什么只加 dir="rtl" 但 margin-inline-start 没反应
它根本不会读取浏览器语言设置或 lang 属性，只响应 HTML 元素的 dir 属性或 CSS 的 direction 声明。常见错误是写了 <html lang="ar"> 却漏掉 dir="rtl"，结果 computed style 里 margin-inline-start 还是解析成 margin-left。必须显式声明方向上下文，逻辑属性才开始“认路”。
用 postcss-logical 转译 inset-block-start 等逻辑定位属性
别用 autoprefixer 或 postcss-dir-pseudo ——它们不处理 inset、margin-block、padding-inline 这类属性。postcss-logical 是专为此设计的插件，开箱即用，默认启用所有逻辑属性转译（包括 place-items 和 border-inline）。
- 确保它在构建链路中位于
css-loader之前，否则模块化后原始逻辑声明可能被剥离 - 若项目需运行时动态切换
dir（比如用户点按钮切 RTL），加{ preserve: true }选项，否则原逻辑声明会被删掉 - Android 4.4 WebView 不认识
inline-start，但能吃left——确认fallbacks选项为true（默认就是） - 避免在
@media里嵌套逻辑属性再转译，否则会生成重复媒体查询，CSS 体积翻倍
@supports 包裹逻辑写法比 PostCSS 更可控
PostCSS 转译是构建时行为，无法覆盖运行时 dir 变更；而 @supports 是运行时检测，更轻量、更可预测。尤其适合渐进增强场景。
- 只对现代浏览器启用逻辑属性，旧浏览器回退到物理属性 +
[dir="rtl"]手动翻转 - 不要依赖 PostCSS 自动生成
[dir="rtl"] .card { margin-left: 16px; margin-right: 16px; }——这容易和你手写的 RTL 规则冲突 - 示例写法：
code.card { margin-inline: 16px; } @supports not (margin-inline: 16px) { .card { margin-left: 16px; margin-right: 16px; } [dir="rtl"] .card { margin-left: 16px; margin-right: 16px; } }
inset-inline-start 必须配对使用，且只对 position: absolute/fixed 生效
它不是 left 的别名，而是依赖父容器 direction 的逻辑定位值：LTR 下等价 left，RTL 下等价 right。但它不能和 left/right 混用，否则后者会覆盖前者。
立即学习“前端免费学习笔记（深入）”；
- 必须同时声明
inset-block-end和inset-inline-start，缺一不可，否则定位不完整 - 父元素若有
transform或contain: layout，可能干扰 inset 计算，此时建议退回到margin+ 显式direction判断 - 它不响应
body或系统语言设置，只看最近的、有direction声明的祖先元素
<style> 或 JS 注入样式，PostCSS 根本看不到。 
