截至2026年9月，@layer已在chrome 99+、firefox 101+、safari 15.4+、edge 101+中稳定支持；safari 15.0–15.3、firefox 94–100、所有ie及android webview均不支持，会静默忽略导致样式丢失。
CSS Cascade Layers 不能被旧浏览器识别，直接使用会导致样式丢失；必须配合回退策略，且回退不能只靠 @supports。
哪些浏览器支持 @layer？
截至 2026 年 9 月，@layer 已在 Chrome 99+、Firefox 101+、Safari 15.4+、Edge 101+ 中稳定支持。但 Safari 15.0–15.3、Firefox 94–100、所有 IE 和 Android WebView（Chrome ）均完全忽略 <code>@layer 声明——不是降级，是静默丢弃整块规则。
这意味着：
-
@layer base { body { margin: 0; } }在 Safari 15.2 中不会生效，body保持浏览器默认 margin -
@supports ( @layer ) { ... }在不支持的浏览器中永远为false，但无法触发“否则”分支来注入回退样式 - 仅靠构建时 CSS 拆分或 PostCSS 插件（如
postcss-cascade-layers）不能还原语义，因为层间优先级逻辑无法静态模拟
推荐的三层回退结构
把样式组织成「基础层 → 组件层 → 工具层」，同时为每层提供未包裹的平行副本：
@layer reset, base, components, utilities;
<p>/<em> 支持层叠层的浏览器：走 @layer 路径 </em>/
@layer reset {</p>
- { box-sizing: border-box; } } @layer base { body { margin: 0; font-family: system-ui; } } @layer components { .btn { padding: 0.5rem 1rem; } }
/ 不支持 @layer 的浏览器：走无层路径（必须放在 @layer 块之后）/
- { box-sizing: border-box; }
body { margin: 0; font-family: system-ui; }
.btn { padding: 0.5rem 1rem; }
关键点：
- 无层样式必须写在所有
@layer块之后，否则会被层内同名规则覆盖（即使浏览器不解析@layer，也会跳过其内容，但后续普通样式仍有效） - 不能把无层样式写在
@layer块内部，否则会被一并忽略 - 避免在无层副本中使用高特异性选择器（如
#app .btn），否则会污染现代浏览器的层优先级预期
- 无层样式必须写在所有
如何检测并动态加载回退 CSS？
纯 CSS 无法条件加载，需借助 JS 判断后插入：
if (!CSS.supports('color', 'color(display-p3 1 0 0)') ||
!CSS.supports('@layer test { }')) {
const link = document.createElement('link');
link.rel = 'stylesheet';
link.href = '/css/fallback.css';
document.head.append(link);
}
注意：
-
CSS.supports('@layer test { }')是最准的检测方式，比 UA 或版本号判断可靠 - 不要用
@import加载 fallback，它会阻塞渲染且无法被 JS 控制时机 - fallback.css 中不应含任何
@layer，也不应与主样式表有同名规则冲突（建议用前缀如.fb-btn隔离）
第三方库集成时的常见陷阱
当你引入一个带 @layer third-party 的组件库（如现代版 Headless UI），而你的项目未声明该层顺序，行为不可控：
- 若你写了
@layer base, components;，但没提third-party，它的层会排在最后，但优先级仍高于你未分层的样式 - 若你完全没写
@layer声明，第三方库的@layer third-party { ... }会被浏览器忽略，导致样式失效 - 最稳妥做法：在项目入口 CSS 顶部统一声明完整层序，例如
@layer reset, third-party, base, components, utilities;
层顺序声明必须出现在任何 @layer <name> { ... }</name> 之前，且只能出现一次；重复声明会报 CSS 解析错误。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
