1

I'm styling an <input type="range" /> element.

For the track I'm using ::-moz-range-track for Firefox, and ::-webkit-slider-runnable-track for Chrome.

When I define the styles for Firefox, everything works fine, but when I add the Chrome-selector to the definition, it doesn't work in Firefox anymore.

Working in Firefox: https://jsfiddle.net/zr8p7vsy/

Not working in Firefox: https://jsfiddle.net/zr8p7vsy/1/

Having the same CSS styles twice – once with the Chrome selector, once with the Firefox selector – doesn't have this effect.

Why does the additional selector trigger this behavior in Firefox?

Edit: I noticed the second one also doesn't work in Chrome. When I remove the -moz- selector, it works. Also, when I add a non-browser-specific selector instead (e.g. .whatever) it works.

So it seems that multiple browser-specific selectors are crashing the whole styling block.

Why does it do that?

Froxx
  • 957
  • 4
  • 14
  • 27

2 Answers2

4

It's because ::-webkit-slider-runnable-track is not valid in Firefox. This behavior is defined in the selectors level 3 standards

Warning: the equivalence is true in this example because all the selectors are valid selectors. If just one of these selectors were invalid, the entire group of selectors would be invalid. This would invalidate the rule for all three heading elements, whereas in the former case only one of the three individual heading rules would be invalidated.

abney317
  • 7,760
  • 6
  • 32
  • 56
  • Oh, I see. I didn't know that a single unknown selector would crash the whole block although it's syntactically correct. Cheers! – Froxx Feb 06 '18 at 17:31
  • Is there are cleaner way to style both of those browser-specific pseudo-elements than having the whole code block twice with just a different selector? – Froxx Feb 06 '18 at 17:33
  • 1
    @Froxx: There is not. – BoltClock Feb 06 '18 at 18:00
0

Because an invalid selector part - and since these are vendor extensions, they are not really valid - invalidates the whole rule.

CBroe
  • 91,630
  • 14
  • 92
  • 150
  • But what makes the selector invalid? Both do work on their own. – Froxx Feb 06 '18 at 17:27
  • They are not part of the official specification. _Vendor extensions_ are either stuff a browser vendor came up with on their own, or they are an early implementation of something that is in the process of being specified, but since the specification might still change, the behavior is only implemented behind a vendor prefix. – CBroe Feb 06 '18 at 17:29
  • 1
    @Froxx: In practice, any selector a browser doesn't recognize is considered invalid for the purposes of error handling. See also: https://stackoverflow.com/questions/38856208/what-happens-when-the-browser-doesnt-support-a-css-pseudo-class/38873378#38873378 – BoltClock Feb 06 '18 at 17:59