Ignoring Webkit-specific CSS selector in Firefox

Question

I am working on a jQuery theme that includes styling for as many form elements as possible. It was originally developed for Webkit (Chrome). Now I want it to work with Firefox too.

Problem: 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 input[type="range"]::-webkit-slider-thumb, Uninstall it and Firefox works fine. He also does this for other syntax such as ::-webkit-file-upload-button , ::selection and all the others using labels ::-webkit-... It recognizes its own labels ::-moz-... , for example ::-moz-selection , although this is good.

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

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

Use recently updated versions of Chrome and Firefox.

Answer 1

Unfortunately, this is not possible without duplicating ad units, since the CSS specification provides that browsers should behave this way when faced with unrecognized CSS selectors rules:

The selector consists of everything up to (but not including) the first left curly bracket ({). The selector always comes with the {} block. When the user agent cannot parse the selector (i.e., it is not valid CSS3), it should ignore {} -block as well.

In this case, the browser of one provider cannot recognize the prefixes of another provider, so it should ignore the rule.

Answer 2

I had to read a little to answer this question, here are some good resources, Gecko style mechanism Further reading on the implementation of the Engine , Still I did not see any pointers why it was lost, but I can give you everything I can, I think that the engine discards the entire selector, suppose that mozilla implements the pseudo-selector -moz-slider-thumb and tries to use it - webkit- and it will also be deleted.

I have seen this behavior before in all browsers, and I think it is sometimes used as a hack for some browsers.

It 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; } 

It will not be

 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

 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 value properties for two or more different selectors, this will only affect the size of the stylesheet, as engines will continue to discard a selector that they do not have.

I really hope this helps a little at least.

EDIT:

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

Answer 3

FYI, I ended up deciding a different solution.

Since my final product is a style sheet, I decided to use a CSS compiler to create a .CSS file based on the source file. While it works fine.

I used LessPHP because the .less format is quite popular and I am familiar with PHP, but they will do any other.

Please note that I use LessPHP only to compile a static .CSS file, so this will not be a requirement for end users of this project if they do not want to modify the source files themselves without.