算了，还是讲下named-feature() @supports规则检测吧
内容提要
文章介绍CSS新增的`@supports named-feature()`检测函数，用于检测浏览器是否支持特定行为而非语法。典型用法有二：一是`anchor-position-follows-transforms`，检测锚点定位是否跟随transform更新，避免旧版bug导致UI错位；二是`single-axis-scroll-container`，检测单轴滚动容器支持，解决设置`overflow-x:auto`后垂直方向粘性定位失效的历史遗留问题。该特性较新且小众，主要用于新老特性兼容。
延伸解读
named-feature() 检测的是行为而非语法
与常规 @supports 检测属性值或选择器语法不同，named-feature() 的参数是 CSS 规范中显式登记的特殊名称，用于判断浏览器是否支持某种具体行为。例如 anchor-position-follows-transforms 检测锚点定位是否跟随 transform 更新，single-axis-scroll-container 检测单轴滚动容器能力。这种检测能区分“认识语法”和“行为正确”，避免旧版实现中的 bug 导致布局错位。
单轴滚动检测解决粘性定位失效
当容器设置 overflow-x: auto 时，旧版浏览器仍将其视为双轴滚动容器，导致垂直方向的 position: sticky 失效。CSS 规范修订后，允许 overflow-x: auto 与 overflow-y: clip 配对，使容器仅作为单轴滚动容器。但仅用 @supports (overflow: auto clip) 只能检测语法解析，无法确认底层滚动上下文是否已更新，因此需要 named-feature(single-axis-scroll-container) 来检测实际行为。
兼容性新且小众，主要用于渐进增强
文章指出该特性非常新，Chrome 154 才开始支持单轴滚动容器，named-feature() 本身也较新。作者估计绝大多数前端开发者不会在实际项目中使用。它更适合作为渐进增强手段：在支持时启用高级布局，不支持时回退到传统方案或 JS 补丁。对于需要处理新老浏览器行为差异的复杂 UI，这种检测提供了一种更精确的兼容策略。
Q&A
CSS的@supports named-feature()是什么？和普通@supports检测有什么区别？
named-feature()是@supports新增的检测函数，参数是CSS规范中显式登记的特殊名字，用于检测浏览器是否支持某种特定行为，而非仅检测语法。普通@supports (property: value)只检查浏览器能否解析该属性值，而named-feature()能判断浏览器底层行为是否符合预期，例如是否修复了某个渲染bug。
为什么需要named-feature(anchor-position-follows-transforms)？它解决什么问题？
锚点定位anchor()在部分旧版实现中，元素做transform后锚点坐标不会跟着更新，导致UI错位。传统@supports (position: anchor())只能检测浏览器是否认识anchor语法，无法检测transform定位bug是否修复。named-feature(anchor-position-follows-transforms)可以判断行为是否符合预期，从而区分两套实现逻辑，避免UI错位。
设置overflow-x:auto后，为什么垂直方向的粘性定位会失效？
这是“次轴无法被彻底裁剪”的历史遗留问题。即使显式设置overflow-y: clip或hidden，浏览器底层仍会将容器视为两个轴向都能滚动的容器，误认为Y轴也是滚动容器，导致表头等粘性定位元素被困在外层容器中，无法跟随页面垂直滚动条实现粘性固定。
single-axis-scroll-container检测是做什么的？为什么不能直接用@supports (overflow: auto clip)？
single-axis-scroll-container用于检测浏览器是否支持单轴滚动容器，即overflow-x: auto与overflow-y: clip配对时容器仅作为X轴滚动容器。不能直接用@supports (overflow: auto clip)，因为旧版浏览器虽能解析该语法，但底层滚动上下文计算机制仍是旧的，不会正确处理单轴滚动逻辑，所以需要named-feature()检测实际行为支持。
named-feature()特性目前兼容性如何？值得在实际项目中使用吗？
该特性非常新且小众，作者估计99.9%的前端没有机会在实际项目中使用。根据文章，single-axis-scroll-container相关支持从Chrome 154开始。作者认为其学习价值不高，主要用于新老特性兼容场景。
如果浏览器不支持单轴滚动容器，有什么修复方案？
文章提到，如果不支持单轴滚动容器，可以使用JS打补丁，或使用其他策略修复。具体补丁方法文章未详细展开，但指出可通过检测结果决定是否启用备用方案。
