原生 CSS Nesting 兼容性差：Firefox 完全不支持，Safari 17.3 存在 &hover 静默失效，Chrome ≤118/旧版 Edge 样式静默丢失；postcss-nesting 不支持 @nest 语法，仅处理 & 开头规则，混用将导致转译错误与浏览器解析失败。
原生 CSS Nesting 在 Firefox 全面不支持，Safari 17.3 存在 &:hover 静默失效等隐蔽缺陷，Chrome ≤118 或旧版 Edge 用户也会收不到任何样式——它不会报错、不降级、不提示，只安静消失。兼容不是“加个前缀”就能解决的事，得从构建、写法、验证三端同时控制。
用 postcss-nesting 转译 @nest 语法行不通
postcss-nesting 不解析 @nest，它只认 & 开头的子规则，且把 & 当字符串拼接符处理。你写：
.card {
@nest & h2 { color: red; }
}插件会原样输出，浏览器不认就丢弃；而写成：
.card {
& h2 { color: red; }
}它能展开，但这不是原生语法，且和 @nest 的语义、校验逻辑完全脱钩。混用会导致：
立即学习“前端免费学习笔记（深入）”；
-
postcss-nesting提前替换掉&，让后续浏览器收不到合法的@nest &结构 - 本地开发时 Chrome 看着正常，线上 Firefox 用户白屏或样式错乱
- 构建流程中若 css-loader 版本 @nest 的整段 CSS
真正有效的双写策略：显式分离原生与降级规则
不要指望自动 fallback，必须手动维护两套结构。推荐写法是「原生块 + 传统块」并列，用注释标记作用域：
/* == Native Nesting (Chrome 119+, Safari 17.4+, Edge 119+) == */
.card {
@nest &__title { font-size: 1.5rem; }
@nest &__content p { line-height: 1.6; }
}
<p>/<em> == Fallback for Firefox / Safari ≤17.3 / legacy Chrome == </em>/
.card<strong>title { font-size: 1.5rem; }
.card</strong>content p { line-height: 1.6; }这种写法的好处：
- 无运行时开销，不依赖 JS 检测或动态插入
- PostCSS 构建阶段可安全压缩，
@nest不会被误删 - Firefox 用户即使开了
layout.css.nesting.enabled，也因优先级规则（后声明覆盖前）确保视觉一致
上线前必须验证三件事，缺一不可
本地能跑 ≠ 用户能看到。每次发版前盯住这三点：
- 查真实用户 UA 分布：重点看 iOS Safari 17.3 占比——它对
&:hover有已知缺陷，但&::before正常，不能靠一个测试页判断 - 确认构建链未破坏
@nest：Vite ≥ 4.5 默认支持；Webpack 用户需检查css-loader≥ 6.8 且importLoaders未设为 0 - 用
css.supports('nesting', 'true')做运行时兜底：仅用于记录上报，别用来开关样式——因为 Safari 17.3 返回true却仍可能静默失效
最容易被忽略的是 Safari 17.3 的“局部失效”：它支持 @nest 语法，但某些伪类组合（如 &:is(:hover, :focus)）会整条规则丢弃，且 DevTools Styles 面板里完全不显示。你得拿真机 + 真用户流量日志交叉验证，而不是只信 caniuse 表格。
