0

次のように @import スタイルのメディア クエリを使用して、ブラウザー固有の CSS を含めようとしています。

<style type="text/css">@import url(foo.css) all and (-moz-box-sizing: content-box);</style>

foo.css は次のようになります。

.myStyle { -moz-box-sizing: border-box; }

アイデアは、Firefox (Gecko/Mozilla) ブラウザー用の foo.css を含めることです。ただし、Firefox では foo.css が適用されていないようです。そう：

  1. @import メディア クエリが true と評価されない理由を Firefox でデバッグするにはどうすればよいですか。「InspectQ」でチェックして、使用しているブラウザーで -moz-box-sizing が実際にコンテキストボックスであることを確認しました。しかし、何らかの理由で、そのメディア クエリ式は明らかに false と評価されています。実行時にその評価を確認するには、どのツールを使用できますか?

  2. そのメディアクエリに何か問題があると思う人はいますか?

  3. @import スタイルのメディア クエリを使用して Mozilla ブラウザを検出するより一般的な方法はありますか?

4

1 に答える 1

1

メディア クエリの仕様では、使用できる特定のメディア機能のセットが定義されています。構文はプロパティ宣言に似ていますが、任意の CSS プロパティをメディア機能として使用することはできません。たとえば、-moz-box-sizingMozilla ブラウザに対しても、メディア クエリで何を意味するのでしょうか?

あなたの場合、とにかく Mozilla ブラウザだけが-moz-接頭辞を理解するので、条件付きインポートなしで CSS ルールをメイン スタイルシートに直接配置することができます。

于 2013-01-12T09:48:39.993 に答える