chrome 99 是首个原生支持 @layer 的稳定版，98 及更早版本会静默忽略 @layer 声明；firefox 97–101 存在解析 bug，safari 15.4–16.3 对 @import 嵌套层支持不完整，且所有浏览器均要求 @layer 必须位于 css 顶层、无前置字符，否则失效。
Chrome 99 以下版本直接忽略 @layer 声明
Chrome 99 是首个原生支持 @layer 的稳定版，早于它的所有 Chrome（包括 98、97）和基于 Chromium 98 及更旧内核的 Edge、Opera 等，遇到 @layer 会静默丢弃整条规则——不是报错，也不是警告，而是像没写过一样。DevTools 的 Styles 面板里完全看不到层名，Computed 里也查不到层叠来源。
验证方法：navigator.userAgent 中若含 Chrome/98 或更低，或 Edg/98 等，就确定不支持。
常见误判点：
- 以为“现代浏览器”=“支持 @layer”，其实 Chrome 99 发布于 2022 年 2 月，大量企业内网仍卡在 96–98 版
- 用 Can I Use 查“@layer”显示绿色，但没注意它标注的是“Chrome 99+”，而非“所有 Chrome”
- Vite/HMR 开发时看到样式生效，误以为兼容，实则是构建工具（如 postcss-cascade-layers）做了转译，生产环境未启用插件就失效
Firefox 97–101 存在 @layer 解析 Bug
Firefox 97 是首个支持 @layer 的正式版，但 97–101 期间存在一个关键 bug：当 @layer 声明后紧跟空行或注释，解析器会跳过后续所有层定义。例如：
@layer reset, base;
/* reset styles */
@layer reset { * { margin: 0; } }
上面这段在 Firefox 99 里，@layer reset 块会被忽略——因为注释紧贴声明之后。必须写成：
在 Linux 上通过 Chrome 挂载/VNC 自动发布小红书长笔记。Agent 撰写标题和正文后执行 xhs_publish.sh --publish --submit，触发小红书发布。
@layer reset, base;
@layer reset { * { margin: 0; } }
这个 bug 在 Firefox 102+ 修复，但仍有相当数量用户停留在 97–101（尤其 Linux 发行版默认源未及时更新）。
Safari 15.4–16.3 对 @import 嵌套层支持不完整
Safari 15.4 是首个支持 @layer 的版本，但它对 @layer foo { @import "x.css"; } 这种写法支持不稳定：有时能加载，有时 @import 内容被当作普通未命名层处理，导致层序错乱。
实操建议：
- 避免在
@layer块内使用@import，改用构建时 inline 内容（如 Vite 的?inline插件） - 若必须用
@import，确保路径是相对路径且无查询参数（@import "./antd.css";✅，@import "./antd.css?v=1";❌） - Safari 16.4+ 已修复该问题，但 macOS Monterey（12.x）用户无法升级到 16.4，只能降级为全局
@layer framework { }+ 手动复制内容
检查时别只看“是否支持”，要看“是否正确解析”
很多开发者用 CSS.supports('layer()') 或查 UA 就判定 OK，但实际加载失败常因更隐蔽的问题：
-
@layer必须位于 CSS 文件最顶部，前面不能有任何字符（包括 BOM、注释、空格），否则整个声明无效 - 多个
<style></style>标签中，只要有一个标签内@layer位置错误，可能污染后续所有层解析（尤其 Safari） - HTTP 响应头若含
X-Content-Type-Options: nosniff且 CSS 文件 MIME 类型非text/css，Safari 会拒绝解析任何@layer（即使其他样式正常）
真正可靠的检查方式：打开 DevTools → Elements → 选中任意元素 → Computed → 拉到底部看 “Layer” 字段是否出现；若为空，说明层机制根本没启动，不用再查样式逻辑。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
