1

I am customizing an HTML5 input. I noticed code duplication between my Firefox and Webkit styles, so I tried grouping them with disappointing results. All Firefox attributes were applied, but Chrome's attributes were not. Why would grouping affect results?

HTML

<input
  class="slider"
  type="range"
  min="0"
  max="100"
  step="10">

CSS

.slider {
  -webkit-appearance: none;
}

.slider,
.slider::-moz-range-track {
  background-color: #031424;
  height:           1em;
}
Zollie
  • 381
  • 3
  • 16
  • Maybe you could group them with a preprocessor such as Sass or Less. – Asitis Mar 16 '17 at 21:56
  • @AlexTimmer — How would that help? – Quentin Mar 16 '17 at 22:02
  • @Quentin; well the only reason you'd want to group classes is to keep a clean and tidy CSS file. The best way to keep a clean and tidy CSS file is to use a preprocessor which allows for things like nesting and chaining. – Asitis Mar 16 '17 at 22:58
  • @AlexTimmer — How would grouping them using a tool deal with the problem of browsers not supporting them when they are in groups? – Quentin Mar 17 '17 at 06:53

1 Answers1

2

If a selector is unrecognised, then a browser is required to treat it as an error and ignore it: The whole selector, not just the group. So you can't group them.

Quentin
  • 914,110
  • 126
  • 1,211
  • 1,335