☰

CSSでFirefoxのみをターゲットにする 質問する

tag-icon • tag-icon css firefox browser-detection
CSSでFirefoxのみをターゲットにする 質問する

条件付きコメントを使用すると、ブラウザ固有の CSS ルールで Internet Explorer をターゲットにすることが簡単になります。

<!--[if IE 6]>
...include IE6-specific stylesheet here...
<![endif]-->

時々、Gecko エンジン (Firefox) が誤動作することがあります。CSSルールで Firefox のみを対象とし、他のブラウザーは対象としない最適な方法は何でしょうか。つまり、Internet Explorer が Firefox のみのルールを無視するだけでなく、WebKit と Opera も無視する必要があります。

注:私は「クリーンな」ソリューションを探しています。JavaScript ブラウザー スニファーを使用して HTML に「firefox」クラスを追加することは、私の意見ではクリーンとは言えません。むしろ、条件付きコメントが IE にのみ「特別」であるのと同じように、ブラウザーの機能に依存するものを見たいです...

ベストアンサー1

このソリューションは、JavaScript が有効になっていることに依存しません。

@-moz-document url-prefix() {
  h1 {
    color: red;
  }
}
<h1>This should be red in FF</h1>

これは、Mozilla 固有の CSS 拡張機能に基づいています。これらの CSS 拡張機能の一覧は、次のとおりです。Mozilla CSS 拡張機能⚠これらはほとんどが非推奨となっていることに注意してください。

この特定の CSS 拡張機能の詳細については、次の質問を参照してください。@-moz-document url-prefix() は何をしますか?

おすすめ記事