Ignoring Webkit-specific CSS selector in Firefox

Question

I'm working on a jQuery theme which includes styling for as many form elements as possible. Initially it was developed for Webkit (Chrome). Now I want to make it work with Firefox as well.

Problem is; Firefox has problems with some Webkit-specific syntax.

For example:

input[type="range"]::-webkit-slider-thumb,
input[type=radio],
input[type=checkbox] {
    -webkit-appearance: none !important;
    -moz-appearance: none;
    width: 1.2em;
    height: 1.2em;
    border: 1px solid black;
    background: #666666 url(images/ui-bg_highlight-soft_50_666666_1x100.png) 50% 50% repeat-x;
}

The problem is the input[type="range"]::-webkit-slider-thumb, bit. Remove it and Firefox works fine. It also does this for other syntax like ::-webkit-file-upload-button, ::selection and all other things using the ::-webkit-... labels. It recognizes it's own ::-moz-... labels, like ::-moz-selection just fine though.

Webkit seems to just ignore the ::-moz- labels.

Is there any convenient way to make Firefox ignore the ::-webkit-... labels or otherwise deal with this problem without having to maintain multiple copies of every CSS block?

Using freshly updated versions of Chrome and Firefox.

Answer 1

Unfortunately, it's not possible without duplicating the declaration blocks, as the CSS spec stipulates that browsers must behave this way when encountering unrecognized selectors in CSS rules:

The selector consists of everything up to (but not including) the first left curly brace ({). A selector always goes together with a {}-block. When a user agent can't parse the selector (i.e., it is not valid CSS3), it must ignore the {}-block as well.

In this case, it's one vendor's browser being unable to recognize another vendor's prefixes, so it has to ignore the rule.

Answer 2

I had to read a little bit to answer this question, here are some good resources, Gecko Style Engine Further Reading on the Engine Implementation, Still i did not see any pointers as why it would drop it, but i can give you my best guess, I think the engine is dropping the whole selector, suppose that mozilla implements -moz-slider-thumb pseudo selector and try to use it with -webkit- and it will be dropped as well.

I have seen this behavior before in all browsers, and i think its being used as a hack to target some browsers sometimes.

This will work

input[type=radio],
input[type=checkbox] {
    -webkit-appearance: none !important;
    -moz-appearance: none;
    width: 1.2em;
    height: 1.2em;
    border: 1px solid black;
}

This wont

input[type="range"]::-webkit-slider-thumb,
input[type=radio],
input[type=checkbox] {
    -webkit-appearance: none !important;
    -moz-appearance: none;
    width: 1.2em;
    height: 1.2em;
    border: 1px solid black;
}

or this

input[type="range"]::-moz-slider-thumb,
input[type=radio],
input[type=checkbox] {
    -webkit-appearance: none !important;
    -moz-appearance: none;
    width: 1.2em;
    height: 1.2em;
    border: 1px solid black;
}

I think you will have to rewrite the properties-values on two or more different selectors, this will only affect the size of the stylesheet as the engines will keep dropping the selectors they dont own.

I really hope this helped a little bit at least.

EDIT:

As noted by user @BoltClock in the comments my guess was correct here is a link to the spec w3.org/TR/css3-syntax/#rule-sets