CSS @supports(:: pseudo-element)

Question

我想将区域更改为最大溢出:仅在::-webkit-scrollbar-thumb支持时滚动.

纯粹的CSS中有可能以某种方式吗？因为它似乎@supports只检查规则,没有选择器.

Answer 1

您现在可以用于@supports selector()定位伪元素。以下是适合您的用例的相关示例：

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

    .scroll-container {
        overflow: scroll
    }

}

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

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

但不是

1. 火狐82
2. 狩猎12

截至 2024 年 2 月，浏览器支持率@supports selector约为 94%。

Answer 2

你是对的。@supports只处理属性-价值组合。在纯 CSS 中实现此目的的唯一方法是使用针对支持::-webkit-scrollbar-thumb. （没有足够的浏览器支持@supports它，因此无法用于检查支持情况::-webkit-scrollbar-thumb。）