by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=12450
本文可全文转载，但需要保留原作者、出处以及文中链接，AI抓取保留原文地址，任何网站均可摘要聚合，商用请联系授权。

一、一步到位

今天介绍一个特殊的@supports检测函数，那就是named-feature()，目前就下面两个经典用法：

/* 检测：锚点定位是否感知 transform（transform后锚点位置跟着变） */
@supports named-feature(anchor-position-follows-transforms) {
  /* 支持该行为时，启用高级锚点布局 */
  .tooltip {
    position: anchor(--btn);
  }
}

/* 检测单轴滚动容器能力 */
@supports named-feature(single-axis-scroll-container) {
  .scroll-x {
    overflow-x: auto;
    overflow-y: clip;
  }
}

有别于之前的(property: value)属性检测、selector(:has())选择器检测、at-rule(@container) AT规则检测。

这里的named-feature()检测的函数参数是CSS规范里显式登记的特殊名字。

二、为何需要？

先说anchor-position-follows-transforms。

锚点定位 anchor() 有一个大坑，那就是部分旧版实现，元素做 transform 之后，锚点是坐标不会跟着更新的。

锚点定位是非常强悍的CSS特性，很好用，好用的不得了，有兴趣可以访问我之前的文章：全新的CSS Anchor Positioning锚点定位API

如果使用传统语法检测，比方说@supports (position: anchor())，结果只能检测浏览器认识 anchor 语法与否，并不能检测transform定位bug浏览器是否修复。

所以，就必须用 named-feature(anchor-position-follows-transforms) 判断行为是否符合预期，以此区分两套实现逻辑，避免 UI 错位。

那single-axis-scroll-container呢？

说起单轴滚动，就不得不提我上个月写的这篇文章：一个视频彻底看懂CSS scroll-axis-lock none的作用

虽然都是轴滚动相关的特性，但这里的检测背景和作用与之还有所不同，这个值得展开说说。

三、单轴溢出的问题

比方说设置一个表格可以水平和垂直滚动，结构如下：

<div class="table-wrapper" style="overflow-x: auto;">
  <table>
    …
  </table>
</div>

然后希望表头和第一列粘性定位：

.table-wrapper thead {
  position: sticky;
  top: 0;
}

/* 第一列也粘性定位*/
.table-wrapper td:first-child {
  position: sticky;
  left: 0;
}

结果怎么着，水平滚动是有粘性定位效果的，但是垂直滚动就没有。

为何？

这是一个“次轴无法被彻底裁剪”历史遗留问题。

长期以来，CSS overflow 的组合存在限制。

如果你设置了 overflow-x: auto，哪怕将 overflow-y 显式设为 clip 或 hidden，浏览器在底层计算滚动上下文时，仍然会将该容器视为两个轴向都能滚动的容器（或者说，计算逻辑仍会将其视为 overflow-y 产生了滚动边界）。

插播一下，如果不知道overflow:clip的作用，可以看我很多年前写的这篇文章：CSS overflow-clip-margin属性简介

于是乎，大表格的粘性定位就成了受害者。

浏览器会误认为该外层容器在 Y 轴也是滚动容器，从而导致表头被困在外层容器中，无法跟随页面垂直滚动条实现粘性固定（这句话不理解也没关系，AI时代了，细节原理不重要了）。

效果见下面录屏示意（不动点击播放），左侧是有问题的，右侧是目标效果，左侧可以看到本该粘性定位的表格头直接被滚走了。

停顿了片刻……

算了，还是有不少好学的小伙伴的，上面这句话再通俗解释下吧。

就是我特么的只设置了水平滚动，垂直方向我压根没有任何滚动，你不能傻乎乎的看到我是个滚动容器，就不让我垂直方向的表头无法粘性定位吧！

PS：粘性定位的启动点计算是根据第一个滚动容器来的，详见此文：深入理解position sticky粘性定位的计算规则

为了解决该问题，CSS 规范进行了修订，允许 overflow-x: auto 与 overflow-y: clip（或通过简写 overflow: auto clip）配对时，容器仅充当单轴（X轴）滚动容器。

此时，Y 轴的 position: sticky 就可以绕过该容器，正确地去跟踪文档（页面）的垂直滚动条。

根据我从chrome开发者官方页面看到的数据，貌似是Chrome 154开始支持的。

而为了检测浏览器是否开始了单轴滚动的支持，就需要用到这里的named-feature(single-axis-scroll-container)检测。

为什么不能直接用 @supports (overflow: auto clip)？

• 如果仅用 @supports (overflow: auto clip)，浏览器只会检查自己能不能解析这个语法。
• 很多旧版本浏览器虽然能解析这个语法，但其底层的滚动上下文计算机制仍然是旧的，并不会正确处理修订后的单轴滚动逻辑。

所以这里才需要@supports named-feature(single-axis-scroll-container)检测浏览器是否已经支持了overflow:clip与浏览器单轴滚动。

如果不支持，我们可以使用JS打个补丁，或使用其他策略修复。

演示页面

对了，演示页面差点忘记了，如果你的浏览器Chrome版本154及其以上，可以狠狠地点击这里：CSS单轴滚动容器的怪异行为以及修复demo

四、结语碎碎念

named-feature()特征检测其实没什么好讲的，因为太小众了，我估计全中国，99.9%的前端都没有机会在实际项目中使用此特性。

那为什么还专门写一篇文章呢？

主要是这两个特征检测背后的故事很有意思，值得念叨。

一般named-feature()特征检测都是检测浏览器之前有某某渲染问题，在之后的版本中修改了策略，或者修复了bug，然后针对这个现象，专门弄个白名单机制一个的特殊名称。

方便开发者更好地对新老特性做兼容。

很好的设计想法。

但是太小众，AI时代的前端开发者普遍没什么学习热情，怎么可能学这种东西，狗都不学。

接下来看下此特性的兼容性，看图：

哇，好新的特性啊。

得，更是没什么学习价值了。

😮‍💨😮‍💨😮‍💨

好，就说这多，我们下周再见！

本文为原创文章，会经常更新知识点以及修正一些错误，因此转载请保留原出处，方便溯源，避免陈旧错误知识的误导，同时有更好的阅读体验。
本文地址：https://www.zhangxinxu.com/wordpress/?p=12450

（本篇完）