css cascade layers 在 chrome 98 及更早版本中完全不支持，解析器直接忽略 @layer 声明及其内部规则，样式彻底丢失而非降级；chrome 101 起实验性支持，105 起默认启用。
CSS Cascade Layers 在 Chrome 98 及更早版本中完全不支持，不是“部分失效”，而是解析器直接忽略 @layer 声明及其内部规则——这意味着样式不会降级，而是彻底丢失。
Chrome 98 及更早版本对 @layer 的真实行为
Chrome 从 101 版本开始实验性支持 @layer，105 起默认启用。但 98（2022 年初发布）及之前版本的 CSS 解析器根本无法识别 @layer 关键字，遇到时会跳过整条声明和其花括号块。DevTools 的 Styles 面板里看不到任何相关规则，也不会报错或标记为 invalid——它就像一段被注释掉的代码。
- 不是“样式没生效”，而是“压根没加载”
-
@import url('x.css') layer(components)在旧 Chrome 中等价于没写这行 - 即使你写了
@layer base { body { color: red; } }，旧版 Chrome 里body仍走浏览器默认样式或后续未分层规则
回退必须绕开 @layer，用构建时分离 + 运行时检测
不能指望 @supports (color: oklch(50% 0.2 120)) 检测 @layer——它不是 CSS 属性，@supports 对其无效。真正可行的路径只有两条：
CAD通信网关公共库（装修设计扩展版）。提供统一CAD COM封装接口，支持AutoCAD/天正双模式，包含装修专业图层体系、材料图块、房间边界检测、弧形吊顶COM接口。复用建筑施工图方案Skill0公共库。
- 构建时：用 PostCSS 插件（如
postcss-cascade-layers）把分层 CSS 编译成扁平、带命名空间前缀的普通 CSS，并在browserslist中明确排除不支持的版本（例如"not chrome ） - 运行时：通过 JS 检测
CSS.supports('font-palette', 'dark')等间接信号（因@layer无对应CSS.supports测试项），再动态加载不同 CSS 文件；但更稳妥的是直接基于 UA 字符串或navigator.userAgentData（需开启 Permissions Policy）做轻量判断 - 关键点：回退样式不能依赖“同一份 CSS 里分层+非分层共存”，必须物理隔离。比如主包发
styles.layered.css，旧浏览器 fallback 到styles.fallback.css
第三方库（如 PrimeNG 16.4.0）引入的 @layer 怎么处理
这类库通常不会提供“无层叠层”的构建产物。如果你的项目必须支持 Chrome 98，唯一安全做法是拦截并重写其 CSS 输出：
- 在构建流程中（如 Vite 的
transformIndexHtml或 Webpack 的style-loader钩子），正则匹配并移除所有@layer声明及包裹块，保留内部规则（注意：要手动合并重复选择器，避免覆盖） - 禁用该库的 CSS 自动注入，改用
import后通过插件预处理，否则node_modules里的@layer会直接穿透到生产环境 - 检查
primeicons或配套字体文件是否也用了新特性（如font-palette），它们可能比@layer更早触发兼容问题
最易被忽略的一点：Cascade Layers 的回退不是“加个 @supports 就完事”，而是整个样式组织范式的切换。一旦决定支持旧 Chrome，你就得接受——utilities 层里那个 .text-center 不再能靠层序压制 base 层的 h1 样式，得回到 specificity 或 !important 的老路，或者用 BEM 类名前缀硬编码优先级。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
