ブラウザが JavaScript を使用した CSS プロパティをサポートしているかどうかを確認するにはどうすればよいですか?-jsチュートリアル-php.cn

ブラウザが JavaScript を使用した CSS プロパティをサポートしているかどうかを確認するにはどうすればよいですか?

WBOY

リリース： 2023-08-27 23:09:12

転載

964 人が閲覧しました

＃＃＃＃＃＃概要＃＃＃

今日の世界では、システム上でさまざまなブラウザが利用可能です。したがって、一部のカスケードスタイルシート (C.S.S.) プロパティがこのブラウザーでは機能しないことがあります。そのため、特定のブラウザーでどの CSS プロパティがサポートされているかを確認するために、JavaScript にはブラウザーがその特定のプロパティをサポートしているかどうかを確認する組み込みメソッド CSS.supports() があります。

supports()

メソッドは、Opera、Edge、Chrome、Firefox のすべてのブラウザでサポートされています。

＃＃＃文法＃＃＃ CSS.supports() メソッドは、文字列形式のキーと値のペアを入力として受け取ります。使用される基本的な構文は - です。リーリー

supports()

- これは、supports パラメータで渡されたプロパティをブラウザがサポートしているかどうかをチェックする CSS オブジェクトのメソッドです。

propertyName
- これには、表示、位置、マージン、パディング、Z インデックス、テキスト配置などの CSS プロパティの名前が含まれます。
value
- flex、absolute、relative、20 px、left、right などの特定のプロパティの値を受け取ります。
それでは、CSS.Supports() メソッドについて詳しく知るために、いくつかの例を通して学習していきます。

- この例では、CSS スタイルのキー値をパラメーターとして CSS.supports() メソッドに直接渡します。これにより、指定された CSS プロパティがブラウザサーバーのサポート。

＃＃＃アルゴリズム＃＃＃

ステップ 1

- CSS オブジェクト内に CSS.supports() として存在する support() メソッドを使用します。

ステップ 2 - カスケードスタイルシート (CSS) プロパティをパラメータとして渡します。
ステップ 3 - console.log() を使用して、CSS.supports() メソッドをコンソールに出力します。
ステップ 4 - 属性を渡すときに true が返された場合、その特定の属性はサポートされています。それ以外の場合、ブラウザはその属性をサポートしていません。
上記のコードの出力を下の図に示します。「float:top」プロパティと「float:bottom」プロパティは無効であるため、コンソールでは false を返します。一方、「float:right」プロパティと「float:left」プロパティ
は、有効な場合は false を返します。ブラウザでサポートされています。true。

方法 2

- この方法では、ユーザーが特定のフィールドに CSS プロパティを入力し、ブラウザーがこれらの CSS 属性をサポートしているかどうかを確認できるユーザーインターフェイスを構築します。いいえ。

＃＃＃アルゴリズム＃＃＃

ステップ 1 - CSS プロパティはキーと値の形式であるため、キー用と値用の 2 つの検索ボックスを作成します。それぞれの固有の ID を「propertyName」および「pval」として割り当てます。別の出力フィールドと HTML ボタンを作成します。

ステップ 2

- JavaScript で checkCss() という関数を作成します。アロー関数が使用されます。

ステップ 3 - 2 つの入力ボックスにアクセスして変数に保存し、これらのボックスの値を変数に連結します。
ステップ 4 - この連結変数を CSS.supports() に渡し、if-else 条件を確認します。
ステップ 5 - true が返された場合、CSS プロパティはサポートされています。それ以外の場合、false が返された場合、プロパティはサポートされていません。
上記のコードの出力は、下の図に示されているとおりです。ユーザーは、指定された入力ボックスに CSS プロパティを入力し、ブラウザがこれらのプロパティをサポートしているかどうかを確認できます。下の図に示すように、「display:block」属性ブラウザでサポートされており、有効であれば true を返します。
出力は次の図のようになります。False が返されるため、入力ボックスに入力された属性は無効であり、ブラウザーでサポートされていません。
supports() メソッドの戻り値の型はブール値です。これは、現在のブラウザーが CSS プロパティをサポートしているかどうかに応じて true または false を返すためです。例 2 のインターフェイスは、コンソールを繰り返し確認する必要がなくなるため、開発者にとって特に便利です。入力フィールドに CSS プロパティの名前と値を入力するだけで、現在のブラウザがそれをサポートしているかどうかが通知されます。