FirefoxでWebkit固有のCSSセレクタを無視する

Question

できるだけ多くのフォーム要素のスタイリングを含むjQueryテーマに取り組んでいます。 最初はWebkit（Chrome）用に開発されました。今私はそれもFirefoxで動作するようにしたい。

問題があります。 FirefoxにはWebkit固有の構文に問題があります。例えば

：

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

問題がinput[type="range"]::-webkit-slider-thumb,ビットです。それを削除し、Firefoxは正常に動作します。また、::-webkit-file-upload-button,::selectionなどの他の構文と、::-webkit-...ラベルを使用しているその他のすべてのものについても同様です。 ::-moz-selectionのように、自分の::-moz-...というラベルを認識します。

Webkitは、::-moz-というラベルを無視しているようです。

Firefoxに::-webkit-...ラベルを無視させる方法や、CSSブロックごとに複数のコピーを維持することなくこの問題を処理する方法はありますか？

ChromeとFirefoxの新しく更新されたバージョンを使用しています。

Answer 1

残念ながら、それはCSSルールで認識されていないセレクタに遭遇したとき、ブラウザがこのように動作する必要がありCSS spec stipulatesとして、宣言ブロックを複製せずにことはできません。

セレクタはまでのすべてで構成されています（は含みません）最初の左中括弧（{）。セレクタは常に{}ブロックと一緒になります。ユーザエージェントがセレクタを解析できない（すなわち、CSS3が有効でない）場合は、{}ブロックもignoreでなければなりません。

この場合、1つのベンダーのブラウザが別のベンダーのプレフィックスを認識できないため、ルールを無視する必要があります。

Answer 2

私はいくつかの良いリソースは、私は、まだ私は、それはそれをドロップする理由として任意のポインタを見ていないが、私はあなたに私の最高の推測を与えることができ、 Gecko Style EngineFurther Reading on the Engine Implementation、あるここでは、この質問に答えるために少しを読むために持っていましたエンジンがセレクタ全体を削除していると考えて、mozillaが-moz-slider-thumb疑似セレクタを実装し、-webkit-でそれを使用しようとすると、それも削除されます。

私は以前この動作をすべてのブラウザで見てきましたが、時には一部のブラウザを対象とするためにハックとして使用されていると思います。これは動作します

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

この文句を言わない

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

か、この私はあなたが上のプロパティ値を書き換える必要があります考えて

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

二つ以上の異なりますセレクタでは、これはスタイルのサイズにのみ影響しますエンジンは彼らが所有していないセレクターを落とし続けるので、ヒート。

私は本当にこれが少しでも助けてくれることを願っています。

EDIT：

コメントでユーザー@BoltClockで述べたように、私の推測では、ここに正しかったが、スペックFYI w3.org/TR/css3-syntax/#rule-sets

Answer 3

へのリンクですが、私は別の解決策のために行くことになりました。

私の最終製品は、スタイルシートですので、私はソースファイルに基づいて.CSSファイルを生成するために、CSSコンパイラを使用することにしました。これまでのところうまくいきます。

.lessフォーマットが合理的に人気があり、私はPHPに慣れてるので、私はLessPHPを使用しましたが、他のもののいずれかが行います。

私はLessPHPを静的な.CSSファイルのコンパイルにのみ使用していますので、無限のソースファイル自体を変更しない限り、このプロジェクトのエンドユーザーには必要ありません。