必须用三层结构兜底，因@supports(@layer)在旧浏览器中被完全忽略而非返回false，无法触发回退；需先声明@layer顺序，再写各层规则，最后在同一文件末尾添加无层副本。
直接使用 @layer 会导致 Safari 15.3 及更早、Firefox 100 及更早、所有 IE 和 Android WebView 完全静默丢弃整块规则——不是降级，是样式彻底消失。必须用三层结构兜底，且不能只靠 @supports ( @layer )。
为什么 @supports ( @layer ) 不能当回退开关
不支持 @layer 的浏览器会把 @supports ( @layer ) 当作无效语法，整个条件块被忽略，既不执行也不 fallback。它永远返回 false，但你没法在它“否则”分支里注入回退样式。
-
@supports ( @layer ) { @layer base { body { margin: 0; } } }→ 在 Safari 15.2 中整段被跳过，body保持默认 margin - 构建时 PostCSS 插件（如
postcss-cascade-layers）能展开语法，但无法还原层间优先级逻辑——比如@layer components覆盖@layer base的语义，静态拆分做不到 - 真正可用的 fallback 是：在
@layer块之后，紧跟着写一份未包裹的平行副本，并确保它出现在同一文件、同一作用域中
三层回退结构怎么写才生效
核心是「声明层序 + 分层副本 + 位置严格」。浏览器只认顺序，不认文件名或加载时机。
- 第一行必须是
@layer reset, base, components, utilities;—— 空行和纯注释可前置，但不能有@import、:root或任何样式声明 - 所有
@layer规则必须写在这行之后，且按声明顺序从低到高组织（先reset，后utilities） - 回退副本必须放在所有
@layer块之后、同一 CSS 文件内，不能在另一个<link>里，否则旧浏览器加载顺序不可控 - 示例结构：
@layer reset, base, components, utilities;
<p>@layer reset { * { box-sizing: border-box; } }
@layer base { body { margin: 0; } }
@layer components { .btn { padding: 0.5rem; } }</p><p>/<em> 回退副本：必须放在这里，且不带 @layer </em>/</p>
- { box-sizing: border-box; } body { margin: 0; } .btn { padding: 0.5rem; }
第三方库样式怎么一起收编
直接 <link rel="stylesheet"> 或 @import 引入的 CSS 默认落在「未命名顶层」，天然高于你所有 @layer —— 这是回退失效最常见原因。
- 不要用
@import "antd.css"，改用@import "antd.css" layer(framework);（注意：必须是顶层语句，和@layer声明并列） - 更稳妥：把第三方 CSS 内容复制进
@layer framework { /* paste here */ }，彻底规避加载时序和解析限制 - 若第三方库自身含
@layer（如 Chakra UI），检查其层名是否与你冲突；同名层会合并，但顺序由首次声明位置决定，容易翻车 - 动态插入的插件样式（如 TinyMCE 的
<style></style>）需用 JS 拦截，提取内容后手动包裹@layer plugin { ... }再重写入 DOM
最难的不是语法对不对，而是所有参与样式的文件都得遵守同一套层命名和顺序约定——一旦有人在某个组件 CSS 里偷偷加了 @layer theme; 却没在主文件顶部声明，那部分样式就掉出分层体系，变成不可控的 unlayered 规则。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
