Firefox のみの CSS の使用

Web アプリケーションを開発する場合、開発者はすべてのブラウザで適切に表示されることを確認する必要があります。一部の CSS プロパティは Firefox などのブラウザではサポートされていませんが、Chrome、Opera などの他のブラウザではサポートされています。

この場合、Firefox ブラウザのみを対象とする CSS コードを記述する必要があります。このチュートリアルでは、Firefox ブラウザー専用の CSS を記述する 2 つの異なる方法を学習します。

Mozila 固有の CSS 拡張機能を使用する

Firefox ブラウザーで CSS を使用するリストの最初の方法は、'@-moz-document url-prefix()' CSS 固有の拡張機能を使用することです。 Firefox ブラウザを開いたときにのみ Web ページに適用されるように、この CSS 拡張機能に CSS コードを記述する必要があります。

＃＃＃文法＃＃＃

ユーザーは、次の構文に従って @-moz-document url-prefix() CSS 固有の拡張機能を使用して、Firefox に対して CSS を使用できます。

リーリー

例 1

以下の例では、HTML div 要素を作成し、その中にテキスト コンテンツを追加します。その後、CSS で @-moz-document url-prefix() を使用して、Firefox ブラウザの div 要素にのみスタイルを適用しました。

ユーザーは、Chrome および Firefox ブラウザで次の Web ページを開いて、div 要素のスタイルの違いを確認できます。

リーリー

例 2

以下の例では、親 div 要素を作成し、その中に他の div 要素を追加します。 CSS では、@-moz-document url-prefix() CSS 固有の拡張機能を使用して、Firefox ブラウザーでのみ div 要素のスタイルを設定します。

Chrome では、サイズが適用されないため、ユーザーは空の Web ページを表示できますが、Firefox では、スタイル付きの HTML コンテンツを表示できます。

リーリー

@supports ルールを使用する

CSS にはさまざまなルールが含まれており、それぞれが異なる機能を提供します。 @supports ルールはパラメータとして条件を受け取り、その条件が true になると、CSS が Firefox ブラウザの Web ページに適用されます。

この例では、「-moz-Appearance:none」という CSS 条件を使用して、現在のブラウザが Firefox であるかどうかを確認します。 「-moz-Appearance:none」はチェックボックスなどのHTML要素のデフォルトスタイルを削除しますが、ここでは現在のブラウザがFirefoxかどうかを確認するために使用できます。

＃＃＃文法＃＃＃

ユーザーは、次の構文に従って @supports CSS ルールを使用して、Firefox ブラウザーの CSS を使用できます。

リーリー

上記の構文では、@supports ルールの宣言ブロックに CSS コードを追加する必要があります。

例 3

次の例では、HTML に 3 つの異なる "

要素を作成しました。その後、@supports ルールと "-moz-Appearance:none" 条件を使用して、Firefox ブラウザーの CSS にのみ "#" を設定します。 ＃＃" 要素。＃＃＃

Firefox ブラウザでは、ユーザーはさまざまな色のテキストを観察できます。

リーリー

ユーザーは、CSS のみを使用して Firefox ブラウザをターゲットにすることを学びました。 CSS 固有の拡張機能と @supports ルールを使用しました。ユーザーは、Firefox ブラウザが代替スタイルを適用するための特定の CSS プロパティをサポートしていない場合にのみ、Firefox に対して CSS を使用する必要があります。

以上がFirefox のみの CSS の使用の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。