Reducing specificity in roll20 css environment with :where()

Anyone who has made a character sheet, and especially after this last round of enhancements have likely become aware that there are a lot of css rules, in the roll20 environment, that you have to fight with, which makes it frustrating and sometimes ugly to deal with, particularly around inputs and buttons.  Just wanted to flag roll20 that the :where() css function is up to 85% browser compatible, having only been released in May of this year, and should be worth consideration to bringing brought into the current environment. What this new function does is allow you to dig to any particular element, mostly similar to using a standard list of selectors but specificity is always 0 inside the brackets. This would allow you to style an element with a true intent of "default" styling where any user css rule written with normal selectors would cascade without problems.  Hope others will be interested in seeing this explored…!

Adding an example of a CSS rule replacement. There is a current rule of: .charsheet input[type="number] {   width: 3.5em; } This has a specificity of 0-2-1. Which means, if you wanted to overwrite the width of number-typed inputs, you either need an ID selector, three classes, or two classes and an element in your selector.  #thisInput {width: auto;} .sheet .container .inputClass {width: auto;} .sheet .container input {width: auto;} .sheet input[type="number"] {width: auto;} However, with the new selector: :where(.charsheet input[type="number]) {   width: 3.5em; } Those input[type="number"] would have a width of 3.5em but because it has a specificity count of 0, a sheet author could write a CSS rule of something as simple as: input { width: auto; } To set their own widths on all inputs.  My hope is that this would lower the bar for incoming and experienced developers to develop their sheet without needing X-amount of experience in Roll20's particular environment.