CSS @supports (::伪元素)

Question

如果支持::-webkit-scrollbar-thumb，我想将一个区域更改为最大的overflow:scroll。

这在纯CSS中是否有可能呢？似乎@supports仅检查规则，不检查选择器。

- Martin

---

我认为你会需要 https://modernizr.com/。 - Stickers

Answer 1

您现在可以使用@supports selector()来定位伪元素。以下是一个相关的例子：

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

    .scroll-container {
        overflow: scroll
    }

}

请查看此JSFiddle，其中演示了对::-webkit-scrollbar-thumb的浏览器支持:

1. Chrome 86
2. Edge 87
3. Opera 72

但不支援下列浏览器：

1. Firefox 82
2. Safari 12

---

截至2020年12月，浏览器支持 @supports selector 的大约为72％。

- CSSBurner

---

这个答案中有许多（大多已过时的）建议，但截至2021年9月，如果必须使用，@supports selector(::-webkit-scrollbar-thumb){/*Chrome yay, Firefox nay*/}是有效的。 - dakab

Answer 2

您说得对。 @supports 只处理属性值组合。在纯CSS中唯一能够实现这一点的方法是使用CSS hack，针对支持 ::-webkit-scrollbar-thumb 的浏览器进行定位。（由于不支持 @supports 的浏览器数量不足，因此它在检查对 ::-webkit-scrollbar-thumb 的支持方面并不实用。）

- BoltClock

Answer 3

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

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

- jsaddwater

Answer 4

补充上一个答案，你可以直接编写伪选择器，如果浏览器不支持该属性，则会跳过CSS声明。

例如：

li::marker{color:blue}

旧版浏览器将无法看到它。

- user13637469