渐进增强需分层处理：先保功能、再叠效果、最后调体验；用@layer组织降级逻辑，@scope隔离变量作用域，手动模拟DOM结构实现:has()和@container的fallback。
渐进增强不是加个@supports就完事
直接套用@supports (container-type: inline-size)会掩盖真实问题：它只检测语法支持，不保证渲染行为一致。比如 Chrome 121 支持@container但不支持container-name，Safari 18.4 支持:has()但对:has(img:loaded)的触发时机有延迟。真正可维护的方案必须分层处理——先保功能，再叠效果，最后调体验。
用@layer组织降级逻辑，别让 fallback 堆成意大利面
把基础样式、新特性增强、JS 补偿逻辑分别放进不同@layer，浏览器会按声明顺序叠加，而不是靠 specificity 硬拼。容易踩的坑是把所有@supports块塞进同一层，导致 Safari 下:has()失效时，本该回退的旧样式被新层覆盖。
-
@layer base放无依赖的布局（如display: flex+gap）和变量定义 -
@layer features放容器查询、:has()等新特性，每个特性独立成块，避免嵌套@supports -
@layer js-fallback留给 JS 注入的 class（如.js-has-loaded），确保它总在最上层生效
:has() 和 @container 的 fallback 必须手动模拟 DOM 结构
浏览器不支持:has()时，.card:has(.content img)直接失效，不会回退到默认样式——它就像没写过这条规则。你得提前在 HTML 里埋好结构钩子，比如给图片父容器加data-state="loading"，再用 JS 切换状态，CSS 通过[data-state="loaded"]匹配。否则光靠 CSS 无法补全逻辑断层。
- 容器查询 fallback 要预设最小宽度断点（如
@media (max-width: 768px)），因为不支持@container的浏览器根本不会解析那块规则 -
:has(img:loaded)的纯 CSS 方案只适用于 Chrome 121+/Safari 17.4+，其他环境必须 JS 监听load并设 class - 别依赖
img.naturalWidth > 0判断加载完成，缓存命中时load事件可能早于 JS 执行，要用document.readyState === 'loading'做兜底
变量作用域要配合@scope隔离，否则主题切换会连锁污染
2026 年主流浏览器已支持@scope，但很多人仍用:root全局变量。问题在于：一个组件用--card-padding，另一个组件也用同名变量，当@layer叠加时，后声明的会覆盖前声明的，而@scope能锁死变量作用域。Chrome 130+、Firefox 135+ 已稳定支持，Safari 18.4 需加@supports selector(:scope)包裹。
立即学习“前端免费学习笔记（深入）”；
- 组件级变量声明写成
@scope (.card) { --card-padding: 1rem; }，外部样式无法穿透 -
@scope内不能用var(--global-color)跨域引用，必须显式继承或透传 - 和
@layer混用时，@scope优先级高于@layer，变量查找先走作用域再走层叠顺序
@scope和@container目前无法嵌套使用——你不能在@container块里再写@scope。这意味着组件内响应式变量仍需靠 JS 动态设置style属性，或者用container-query polyfill 暂代。 
