@supports 无法直接检测锚点定位，因其无标准化声明对；应改用 css.supports('top: anchor(--a top)') 或 js 运行时检测，配合 :has() 伪类作为必要非充分条件，并严格实施三层渐进增强。
@supports 无法直接检测锚点定位（CSS Anchor Positioning）是否可用——因为该特性目前没有标准化的 CSS 声明对可用于静态检测。 浏览器实现仍处于实验阶段，且未暴露可被 @supports 解析的合法属性/值组合。强行写 @supports (position-anchor: --my-anchor) 或类似形式，整条规则会被忽略，降级逻辑彻底失效。
为什么 @supports (position-anchor: --x) 总是不生效
这不是浏览器 bug，而是规范限制：CSS 锚点定位依赖两套尚未进入正式 CSS 值语法体系的机制——anchor-name（自定义锚点名）和 position-anchor（锚点引用），它们目前仅作为实验性属性存在于 Chromium 120+（含 Edge 120+）中，且不参与 @supports 的静态能力判断流程。
-
@supports只接受「已纳入 CSS Values and Units Level 4 或更早规范」的属性名 + 合法字面值（如display: grid、gap: 1rem） -
anchor-name: --foo是声明式锚点注册，不是可枚举值；position-anchor: --foo是运行时绑定，不构成静态声明对 - 所有主流浏览器（包括 Safari 17.6、Firefox 129）目前均不支持该语法，
@supports解析器直接跳过整块规则
真正可行的检测路径：用 @supports selector() + JS 回退兜底
目前唯一能间接反映锚点定位可用性的 CSS 检测方式，是检查浏览器是否支持 :has() 伪类 —— 因为所有已实现锚点定位的引擎（Chromium 120+），都同步实现了 :has()；而 :has() 已被纳入 CSS Selectors Level 4，支持 @supports selector() 检测。
- 写法必须是
@supports selector(:has(*))，不能省略括号或写成@supports selector(:has) - 这个条件在 Chromium 105+、Safari 15.4+、Firefox 103+ 为 true，但注意：Safari 和 Firefox 虽支持
:has()，却 不支持锚点定位，所以它只是必要非充分条件 - 因此，CSS 层只能做“轻量增强”：比如用
:has()触发浮层显隐，再配合position: anchor()做定位；若失败，浮层仍可通过position: absolute+ JS 计算 fallback
生产环境必须搭配 JS 运行时检测
锚点定位的可用性本质上是运行时行为，必须靠 JS 确认。以下是最小可行检测逻辑：
if ('CSS' in window && CSS.supports('selector', ':has(*)')) {
// 至少有 :has()，继续检测 anchor 相关 API
if (CSS.supports('position-anchor', 'none') ||
'anchorName' in document.documentElement.style) {
document.documentElement.classList.add('has-anchor-position');
}
}
-
CSS.supports('position-anchor', 'none')在 Chromium 120+ 返回 true，是目前最接近的原生检测项（尽管值none并非法，但 Chromium 允许该调用） - 更稳妥的做法是尝试创建带
anchor-name的元素并读取 computed style：getComputedStyle(el).anchorName是否为''或'--x' - 不要只信 UA 字符串或版本号——Chromium 119 不支持，120 支持，但两者 UA 几乎一致
渐进增强结构必须分层设计，不能全押在 CSS 上
锚点定位的增强必须严格遵循“基础布局可用 → CSS 增强定位 → JS 补偿逻辑”的三层结构，否则在 Safari/Firefox 中浮层会完全错位甚至不可见。
- 基础层：浮层默认用
position: absolute+top/left魔法数字（或 JS 初始计算），确保所有浏览器可操作 - CSS 增强层：仅在
.has-anchor-position类存在时，覆盖为position: anchor(--trigger)和anchor-offset - JS 补偿层：监听触发元素 resize/move，动态更新
anchor-name或 fallback 回绝对定位 - 特别注意：
anchor-name必须设在具有布局盒子的元素上（不能是display: contents或visibility: hidden）
锚点定位目前仍是 Chromium 独占特性，@supports 无法成为可靠守门员。真正的安全线，是把 CSS 当作“锦上添花”，把 JS 检测和降级逻辑写进组件初始化流程里——而不是指望一行 @supports 就自动兜住所有浏览器。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
