Browsers ignore rules if a css selector is invalid or not recognized
While developing a slider component for our component library, we wanted to reduce duplication inside our css file. Since there are only browser-specific selectors for the slider knob, we tried to combine those into one rule:
input[type='range']:focus-visible::-moz-range-thumb,
input[type='range']:focus-visible::-webkit-slider-thumb {
/*css here*/
}
Turns out, the browsers don't understand the pseudo elements for a different browser, rendering the selector invalid. This resulted in the whole block being ignored. We have no other choice than to duplicate the rules, once for each selector:
input[type='range']:focus-visible::-moz-range-thumb {
/*css here*/
}
input[type='range']:focus-visible::-webkit-slider-thumb {
/*same css here again*/
}
Sources:
https://stackoverflow.com/a/41246875
https://stackoverflow.com/a/8318202