Menu
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.
591
You need to position the :before pseudo-element absolutely by using the well known centering technique (use the top, left, and transform properties). Here, -25px will offset the text above the circle. Note that for the <span> element, we set the position property to its "relative" value and the display to "block".
You can't specify inline styles for pseudo-elements. This is because pseudo-elements, like pseudo-classes (see my answer to this other question), are defined in CSS using selectors as abstractions of the document tree that can't be expressed in HTML.
A CSS pseudo-element is a keyword added to a selector that lets you style a specific part of the selected element(s). For example, ::first-line can be used to change the font of the first line of a paragraph. /* The first line of every <p> element. */ p::first-line { color: blue; text-transform: uppercase; }
The :is() CSS pseudo-class function takes a selector list as its argument, and selects any element that can be selected by one of the selectors in that list. This is useful for writing large selectors in a more compact form.
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
but not
As of December 2020, browser support for @supports selector is roughly 72%.
176
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.)
44
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
