CSS @supports (::伪元素)

Question

我想将一个区域更改为最大溢出:仅当支持 ::-webkit-scrollbar-thumb 时才滚动。

在纯 CSS 中这有可能吗？看起来 @supports 只检查规则，没有选择器。

Answer 1

您现在可以使用 @supports selector()以伪元素为目标。以下是您的用例的相关示例:

@supports selector(::-webkit-scrollbar-thumb) {

    .scroll-container {
        overflow: scroll
    }

}

请参阅this JSFiddle ，它演示了浏览器对 ::-webkit-scrollbar-thumb 的支持

1. Chrome 86
2. 边缘 87
3. 歌剧 72

但不是

1. 火狐 82
2. Safari 12

---

截至 2020 年 12 月，browser support @supports selector 大约为 72%。