@supports selector() - testing support for a pseudoelement

Support for a pseudoelement, specifically ::-webkit-scrollbar-thumb, is demonstrated with the overflow property. This pseudoclass is supported in: 1. Chrome 86 2. Edge 87 3. Opera 72 but not Firefox 82. For additional context, see question on Stack Overflow: https://stackoverflow.com/questions/35000865/css-supports-pseudo-element

by David Partyka

HTML

<div>
If my background is green it means this browser supports @supports selector()!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!<br>!<br>!<br>!<br>!<br>!<br>!
</div>

CSS

div {
  width: 150px;
  height: 150px;
  background: red;
  overflow: hidden
}

@supports selector(::-webkit-scrollbar-thumb) {
  div {
    overflow: scroll;
    background: green
  }
}