Skip to content

Instantly share code, notes, and snippets.

@FlorianWendelborn

FlorianWendelborn/wtf-sliders.html

Created October 26, 2019 22:59
Show Gist options
  • Save FlorianWendelborn/c84ada212677958648236a89c2aba366 to your computer and use it in GitHub Desktop.
Save FlorianWendelborn/c84ada212677958648236a89c2aba366 to your computer and use it in GitHub Desktop.
Download ZIP
AFAIK, this is supposed to be impossible behvavior. Yet, all browsers seem to be affected.
Raw
wtf-sliders.html
<html>
<head>
<!-- Any idea whatsoever why input.works works and input.wtf is completely
unstyled in firefox & chrome? Also, input.half-wtf works in Firefox, even
when swapping around the lines. -->
<style>
input {
-moz-appearance: none;
-webkit-appearance: none;
appearance: none;
}
input.wtf::-ms-thumb,
input.wtf::-moz-range-thumb,
input.wtf::-webkit-slider-thumb {
-moz-appearance: none;
-webkit-appearance: none;
background-color: red;
height: 10px;
width: 10px;
}
input.half-wtf::-webkit-slider-thumb,
input.half-wtf::-moz-range-thumb {
-moz-appearance: none;
-webkit-appearance: none;
background-color: red;
height: 10px;
width: 10px;
}
input.works::-ms-thumb {
-moz-appearance: none;
-webkit-appearance: none;
background-color: red;
height: 10px;
width: 10px;
}
input.works::-webkit-slider-thumb {
-moz-appearance: none;
-webkit-appearance: none;
background-color: red;
height: 10px;
width: 10px;
}
input.works::-moz-range-thumb {
-moz-appearance: none;
-webkit-appearance: none;
background-color: red;
height: 10px;
width: 10px;
}
</style>
</head>
<body>
<input class="wtf" type="range" />
<br />
<input class="half-wtf" type="range" />
<br />
<input class="works" type="range" />
</body>
</html>
@FlorianWendelborn
Copy link
Author

Update, I finally have an answer for this.

Selectors have terrible future-proofing. We should have split on top-level commas, and only ignored unknown/invalid segments, not the entire thing.
— CSSWG’s List of Mistakes

So, this means that input.wtf doesn’t work properly as both Firefox and Chrome don’t "know" ::-ms-thumb and therefore decide to IGNORE THE ENTIRE STATEMENT.

Firefox apparently knows what ::-webkit-slider-thumb means, which would explain why it works in the .half-wtf case.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment