CSS @supports (::pseudo-element)

Question

I want to change an area to max overflow:scroll only if ::-webkit-scrollbar-thumb is supported.

Is that possible somehow in pure CSS? As it seems @supportsonly checks rules, no selectors.

Answer 1

You can now use @supports selector() to target pseudoelements. Here is a relevant example for your use case:

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

    .scroll-container {
        overflow: scroll
    }

}

Please see this JSFiddle, which demonstrates browser support for ::-webkit-scrollbar-thumb in

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

but not

1. Firefox 82
2. Safari 12

---

As of December 2020, browser support for @supports selector is roughly 72%.

Answer 2

You are correct. @supports only deals with property-value combinations. The only way you could do this in pure CSS is with a CSS hack targeting browsers that support ::-webkit-scrollbar-thumb. (Not enough browsers support @supports for it to be useful in checking support for ::-webkit-scrollbar-thumb anyway.)

Answer 3

Adding up to the previous answer, you can just write the pseudo selector, if a browser doesnt support the prop, it will skip the css declaration.

For example:

li::marker{color:blue}

won't be seen by older browsers.

Answer 4

This is what I used to identify Webkit browsers. It's the most specific pseudo selector I could find that no other engine seems to have (yet):

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