CSS @supports (::伪元素)答案

【问题标题】：CSS @supports (::pseudo-element)CSS @supports (::伪元素)
【发布时间】：2016-05-02 06:00:19
【问题描述】：

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

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

【问题讨论】：

我想你需要modernizr.com

【解决方案1】：

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

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

    .scroll-container {
        overflow: scroll
    }

}

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

铬 86
边缘 87
歌剧 72

但不是

火狐82
Safari 12

截至 2020 年 12 月，browser support 与 @supports selector 的比例约为 72%。

【讨论】：

this answer 中有很多（大部分是过时的）建议，但截至 2021 年 9 月，@supports selector(::-webkit-scrollbar-thumb){/*Chrome yay, Firefox nay*/} 确实有效。

【解决方案2】：

你是对的。 @supports 仅处理属性值组合。您可以在纯 CSS 中执行此操作的唯一方法是使用针对支持 ::-webkit-scrollbar-thumb 的浏览器的 CSS hack。（没有足够的浏览器支持@supports，因为它无论如何都不能用于检查对::-webkit-scrollbar-thumb 的支持。）

【讨论】：

【解决方案3】：

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

例如：

li::marker{color:blue}

旧版浏览器看不到。

【讨论】：

【解决方案4】：

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

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

【讨论】：