CSS を使用して Firefox のみをターゲットにするにはどうすればよいですか?

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

ブラウザ固有の CSS ルールを使用して Internet Explorer をターゲットにする条件付きコメントの機能はよく知られています。ただし、問題が Firefox で使用される Gecko エンジンに起因する場合は、別のアプローチが必要になります。他のブラウザに影響を与えずに、CSS ルールを Firefox にのみ適用するにはどうすればよいですか?

ブラウザ機能ベースのソリューション

JavaScript ブラウザ スニファーは、次のブラウザにとってクリーンなソリューションとは見なされません。この目的。代わりに、ブラウザの機能を利用する方法が推奨されます。

@-moz-document の使用

@-moz-document ルールは、特に Firefox をターゲットにするために使用できます。これは、「-moz-」で始まる「url-prefix()」関数を持つドキュメントに CSS ルールを適用することで機能します。現在この機能をサポートしているブラウザは Firefox のみです。

使用例

次の例は、@-moz-document を使用して h1 の色を変更する方法を示しています。要素を Firefox でのみ赤に変更:

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

<h1>This should be red in FF</h1>

他のブラウザでは、h1 要素は残ります@-moz-document ルールを認識しないため、変更されません。

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