Is there a reason why CSS pseudo-element[non-standard] cannot be combined with Chrome, while Firefox accepts them without a problem?

user_10669010 0
Viewed 46

case example

doesn't work on Chrome, Fine for Firefox

#my-slider {
  width              : 400px;
  margin             : 1em;
  -webkit-appearance : none;
  height             : 8px;
  border-radius      : 4px;
  background-color   : teal;
  }
#my-slider::-webkit-slider-thumb,
#my-slider::-moz-range-thumb {
  -webkit-appearance : none;
  -moz-appearance    : none;
  width              : 30px;
  height             : 30px;
  border-radius      : 15px;
  border             : none;
  background-color   : orange;
  overflow           : visible;
  cursor             : pointer;
  }
<input type="range" min="0" max="100" value="50" id="my-slider">

fine for both

#my-slider {
  width              : 400px;
  margin             : 1em;
  -webkit-appearance : none;
  height             : 8px;
  border-radius      : 4px;
  background-color   : teal;
  }
#my-slider::-webkit-slider-thumb {
  -webkit-appearance : none;
  width              : 30px;
  height             : 30px;
  border-radius      : 15px;
  border             : none;
  background-color   : orange;
  overflow           : visible;
  cursor             : pointer;
  }
#my-slider::-moz-range-thumb {
  -moz-appearance    : none;
  width              : 30px;
  height             : 30px;
  border-radius      : 15px;
  border             : none;
  background-color   : orange;
  overflow           : visible;
  cursor             : pointer;
  }
<input type="range" min="0" max="100" value="50" id="my-slider">

Or is it "just a Bugg" ?

pseudo-element css html
1 Answers

It's a CSS edge case (maybe not present in all browsers), when Chrome browser can't decode/recognize the first selector (therefore consider it as invalid), it response is to ignore the whole rule including the other selectors (even if they are valid), more specifically it stops parsing and doesn't even look if they are valid or not.

The same behaviour is present on IE, so technically it's not truly a bug.

So your second snippet is the way to go when you want to deal with non-standard pseudo-element(s).

user_107977180
Related