recipes · 实战 & 支持度

实战配方与渐进增强

把 anchor()、position-area、position-try 各页的基础能力组合成实用案例。这些配方各自只有几行 CSS，而在此之前都要写一大段 JS。

当前浏览器对 anchor positioning 的实测支持情况，由 CSS.supports() 探测。

popover 把元素放进 top layer，使其永远在最上层且不被任何祖先裁剪（Popover API 的行为详见 dialog 系列的 popover 页），但它不负责贴着触发按钮，默认在屏幕居中。anchor positioning 补上这一段：给按钮 anchor-name、给 popover position-anchor，不写 JS 即可贴合。

图 1-1 · top layer 中的 popover 由 position-anchor 贴到触发按钮。可点击按钮观察开合与定位。

2 · 等宽下拉面板

「下拉面板与上方输入框等宽」从前要用 JS 测量宽度再写死。width: anchor-size(width) 一行即可，字段多宽面板就多宽。

图 2-1 · 面板宽度由 anchor-size(width) 跟随触发字段。可改字段宽度观察面板同步，面板从不读固定值。

3 · 一个锚上的多个浮层

同一个 anchor-name 可以被任意多个浮层引用。

图 3-1 · 四个标签锚定同一个锚、各占一边的布局。

4 · 列表中同名锚的隔离

列表每行都要给自己的小圆点挂一个 badge，若每行的锚都叫 --row，锚名会冲突，浮层可能全跑去贴某一行。anchor-scope: --row 把这个名字限制在每行子树内。

图 4-1 · anchor-scope 把同名锚限制在各行子树内之后，每行 badge 各贴各的圆点。

5 · 表单字段的校验气泡

把 §1 与 §2 组合起来：输入框聚焦时在下方弹出一个带小箭头的提示气泡，开始输入便收起。气泡用 popover 进 top layer 以免被表单容器裁剪，用 anchor 贴在字段下方，再用 anchor-size(width) 等宽，小箭头是一个 ::before 的 CSS 三角。

图 5-1 · 聚焦时弹出、输入时收起的校验气泡。可聚焦输入框观察气泡的出现与箭头的对位。

注 · 箭头无需单独锚定。气泡已经 anchor-size(width) 等宽于字段、左缘由 anchor(left) 对齐字段，因此「箭头相对气泡居中」等同于「相对字段居中」，字段变宽或移动时箭头始终对准。气泡若会经 position-try 翻到字段上方，需在对应的 fallback 样式里把箭头一并翻到底边。

警示 · popover 有两个易错点。其一，[popover] 自带居中的 UA 样式，要先 inset: auto; margin: 0 清除再用 anchor 摆位。其二，想用聚焦而非点击开关时须用 popover="manual" 并自行调用 showPopover() / hidePopover()，auto popover 会被点击空白处自动关掉。

给图表里每个数据点循环生成唯一锚名 --pt-0、--pt-1 等，每个 tooltip 用 position-anchor 咬住自己那个点、position-area: right center 摆到右边、position-try-fallbacks: flip-inline 在靠近右边缘时翻到左侧。悬停的显示由相邻兄弟选择器加 opacity 完成，不需要跟随 JS。这一用法参考 tooltip-chart。

图 6-1 · 每个数据点一个锚的图表 tooltip。可将指针移到各数据点上，最右侧几个点可观察到 tooltip 翻面。

传统做法要在 hover 时用 JS 测出点的坐标、计算 tooltip 位置、监听 resize 与 scroll 重算，还要自行判断翻转；改用 anchor positioning 后位置、跟随、翻转、显示都交给 CSS，JS 只负责画点并设一次 anchor-name。锚名与 anchor-scope 两条路都可行：每点一个 --pt-i 在数据驱动的循环里顺手就设好了；若所有点共用一个名字 --pt，则给每个点的容器加 anchor-scope: --pt 隔离，即画连接线页 §2 的做法。

7 · 渐进增强与支持现状

生产环境应先写不依赖 anchor positioning 的降级布局，再用 @supports 增强，使不支持的浏览器至少能正常使用而不出现浮层错位。

图 7-1 · 以 @supports (anchor-name: --x) 分隔降级布局与增强布局的写法。

图 7-2 · 各浏览器对 anchor positioning 各项能力的支持矩阵，配合页顶横幅给出的当前浏览器实测结果。

建议 · anchor positioning 自 2026 年 1 月起进入 Baseline「newly available」：Chrome 与 Edge 125+、Firefox 147+、Safari 26.0+，caniuse 统计的全局覆盖约 84%（据 MDN BCD 与 caniuse，核对于 2026-08）。覆盖面已不再是采用的障碍，但旧版本仍在长尾里，@supports 分支值得保留；需要覆盖不支持的浏览器时，OddBird 的 polyfill 可作渐进增强的回退。