ブラウザが css3 をサポートしているかどうかを確認する方法

判定方法： 1.「@supports」ルールを使用して判定します。構文形式は「@supports(属性:値){ラベル名{属性:値}}」です。 2.「CSS. support()」関数の判定、構文形式は「CSS.supports("property","value")」です。 。

このチュートリアルの動作環境: Windows7 システム、CSS3&&HTML5 バージョン、Dell G3 コンピューター。

ブラウザが css3 をサポートしているかどうかを確認する方法:

CSS @supports ルール:

構文:

@supports (rule)[operator (rule)]* { sRules }

説明:

rule: 特定の CSS ルールを指定します。これはかっこで囲む必要があります。
演算子: 複数のルールを指定しない場合は、 or | や | などの演算子を使用します。

1. 基本的な使用法:

@supports ( display: flex ) {
    body {
        display: flex;
      }
     #main {
         flex: auto;
      }
}

は、ブラウザが flex 標準をサポートしていることを意味し、内部のルールを使用します。サポートしていない場合は、次のように実装できます。

2.キーワードではありません:

@supports not ( display: flex ) {
    #main{
        float: left;
    }
}

Js CSS.supports function

は、css の @supports タグと同じであり、 jsWindow.CSS.supports() メソッドは、ブラウザが css3 属性をサポートしているかどうかを確認するために使用されます。この関数には 2 つの呼び出しメソッドが用意されています:

最初のメソッドは、2 つのパラメータを使用します。 1 つは属性名、もう 1 つは属性値です。

var supportsFlex = CSS.supports("display", "flex");

2 番目の使用法は、分析が必要なスタイル文字列全体を単純に提供することです。

var supportsFlex = CSS.supports("(display: flex) and (-webkit-display: flex)");

CSS.supports 関数はブール値を返します。これが true の場合、属性がサポートされていることを意味します。もちろん、この関数を使用する前に、まずブラウザが CSS.supports をサポートしているかどうかを確認する必要があります。方法は次のとおりです:

if(!!((window.CSS && window.CSS.supports) || window.supportsCSS || false)){    //支持}

推奨学習: css ビデオ チュートリアル

以上がブラウザが css3 をサポートしているかどうかを確認する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。