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

＃＃＃＃＃＃概要＃＃＃

今日の世界では、システム上でさまざまなブラウザが利用可能です。したがって、一部のカスケード スタイル シート (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() メソッドについて詳しく知るために、いくつかの例を通して学習していきます。

方法 1

- この例では、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 プロパティの名前と値を入力するだけで、現在のブラウザがそれをサポートしているかどうかが通知されます。

以上がブラウザが JavaScript を使用した CSS プロパティをサポートしているかどうかを確認するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。