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.