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

的支持

但不是

截至 2024 年 2 月，@supports selector 的

浏览器支持率

约为 94%。

Answer 2

你是对的。

@supports

仅处理属性值组合。在纯 CSS 中实现此目的的唯一方法是使用针对支持

::-webkit-scrollbar-thumb

的浏览器的 CSS hack。（没有足够的浏览器支持

@supports

，因此无法在检查对

::-webkit-scrollbar-thumb

的支持方面发挥作用。）

Answer 3

补充上一个答案，你可以只写伪选择器，如果浏览器不支持该 prop，它将跳过 css 声明。

例如：

li::marker{color:blue}

旧版浏览器看不到。

Answer 4

这是我用来识别Webkit浏览器的。这是我能找到的最具体的伪选择器，其他引擎似乎还没有：

CSS.supports(`selector(input[type='time']::-webkit-calendar-picker-indicator)`)