不支持@layer的浏览器（如IE11、iOS Safari ≤13.3、Chrome ≤110、Android WebView ≤11）会静默丢弃整条@layer规则及包裹样式，导致reset失效、基础样式丢失；必须构建两套CSS并用media属性条件加载，而非依赖polyfill或JS检测。
不支持 @layer 的浏览器（如 IE11、iOS Safari ≤13.3、Chrome ≤110）会直接忽略整条 @layer 规则及其包裹的样式块，导致 reset 失效、基础样式丢失、组件样式归零——这不是“部分不生效”，而是“整层蒸发”。
哪些浏览器会彻底跳过 @layer
不是所有“旧”浏览器都一样：关键看是否实现 CSS Cascade Layers 规范。根据 caniuse.com 和实测数据，以下环境会静默丢弃 @layer 块：
- iOS Safari ≤13.3（包括大量企业内网 iPad 设备）
- Chrome ≤110（2023 年 2 月前版本，仍存在于部分银行/政企终端）
- Android WebView ≤11（尤其国产定制 ROM 中的系统 WebView）
- IE11 及所有 EdgeHTML 版本（完全无解析能力）
注意：CSS.supports('@layer', 'reset') 在这些浏览器中返回 false，但该 API 本身在 iOS Safari ≤14.0 也不可用，所以不能靠 JS 检测后加载 fallback —— 必须从 CSS 构建阶段就分离。
双 CSS 构建：现代版用 @layer，老版回退纯顺序流
不要试图用 PostCSS 插件“转换”@layer——它无法重建层间优先级逻辑。正确做法是构建两套独立 CSS：
立即学习“前端免费学习笔记（深入）”；
- 主文件
styles.css：含@layer reset, base, components...，供现代浏览器 - 降级文件
styles.fallback.css：手动展开各层内容，按层序拼接，删掉所有@layer声明，保留原选择器和声明
示例片段对比：
@layer reset {
* { margin: 0; padding: 0; }
}
@layer base {
body { font-family: system-ui; }
}→ fallback 版本就是：
/* reset */
* { margin: 0; padding: 0; }
/* base */
body { font-family: system-ui; }构建时用 PostCSS 插件（如 postcss-layer-hide）自动剥离 @layer 并保持顺序，比手写更可靠。
HTML 中条件加载，避免竞态与 FOUC
不能用 JS 动态插入 <link>，否则老浏览器会先渲染无样式的 HTML（FOUC），再闪一下才应用 fallback；也不能用 @supports 包裹 @layer——它不生效，因为 @layer 本身已被解析器跳过。
- 正确方式：服务端 User-Agent 检测（仅限可控环境，如企业内网）或构建时分发两套 HTML
- 更通用方案：在
同时放两个<link>，用media属性控制加载时机
例如：
<link rel="stylesheet" href="styles.css"> <link rel="stylesheet" href="styles.fallback.css" media="not all and (min-width: 0px)">
原理：现代浏览器识别 @layer 后正常加载 styles.css，并因 media="not all" 忽略 fallback；老浏览器不认识 @layer，但能解析 media，于是加载 fallback。这个 trick 在 Chrome 109+/Safari 13.3+ 实测稳定。
最易被忽略的一点：@layer 的降级不是“加个 polyfill 就行”，而是整个样式优先级模型的切换。你必须接受——老浏览器里，.btn.primary 依然要靠选择器特异性胜出，不能指望它和现代版有完全一致的行为。重构时留一条“兼容锚点”：比如所有组件层样式都加一个 [data-layer="components"] 属性选择器，fallback 版本可复用这部分逻辑，减少维护裂口。
