CSS のみを使用して Firefox のスタイルを設定するにはどうすればよいですか?

CSS を使用した Firefox のスタイル設定: 独自のアプローチ

特に条件付きコメントを使用して Internet Explorer を対象とする場合、ブラウザ固有の CSS スタイルを実現することが必要になることがよくあります。 。ただし、この概念を Firefox のみを対象とするように拡張すると、特有の課題が生じます。

Firefox のみを対象とする

CSS ルールを Firefox のみに選択的に適用するには、ブラウザを利用することが解決策となります。 JavaScript スニファーに依存するのではなく、さまざまな機能を利用できます。そのようなアプローチの 1 つは、@-moz-document ルールを利用します。

@-moz-document Rule

@-moz-document ルールにより、Firefox は CSS を認識して適用できます。それに合わせて特別に調整されたルール。このルール形式の構文は次のとおりです。

@-moz-document url-prefix() {
  // Firefox-specific CSS rules
}

使用例

その使用法を説明するために、次のコード スニペットを検討してください。

@-moz-document url-prefix() {
  h1 {
    color: red;
  }
}

<h1 id="This-should-be-red-in-FF">This should be red in FF</h1>

Firefox では、h1 要素は赤色で表示されますが、他のブラウザではこのスタイルが無視されます。 @-moz-document ルール。このアプローチは、Firefox のみをターゲットにし、ルールが他のブラウザに適用されないようにするクリーンなソリューションを提供します。

以上がCSS のみを使用して Firefox のスタイルを設定するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。