CSS @supports タグを使用してブラウザ互換性分析を検出する

@supports は、ブラウザーが特定の CSS 属性をサポートしているかどうかを確認するために使用でき、JavaScript を通じて制御できます。以下は、CSS の @supports タグを使用してブラウザーの互換性を検出する方法について詳しく説明します

CSS @supports タグ。 CSS コードの構文は @media クエリ ステートメントに似ています。

@supports(prop:value) {   
 /* 各种样式 */
}

CSS @supports を使用すると、プログラマはさまざまな方法を使用して、現在のブラウザが特定の CSS スタイル機能をサポートしているかどうかを検出できます。

基本的な属性検出
基本的な属性と属性値の検出を実行できます:

@supports (display: flex) {   
 p { display: flex; }   
}

これは @supports タグの最も基本的な使用法です。

not キーワード
@supports タグは、サポートされていない状況に対処するために 'not' キーワードと組み合わせることができます:

@supports not (display: flex) {   
 p { float: left; } /* 替换样式 */
}

複数の検出と条件付き検出

/* or */
@supports (display: -webkit-flex) or   
          (display: -moz-flex) or   
          (display: flex) {   

    /* use styles here */
}   

/* and */
@supports (display: flex) and (-webkit-appearance: caret) {   

 /* something crazy here */
}   

/* and and or */
@supports ((display: -webkit-flex) or   
          (display: -moz-flex) or   
          (display: flex)) and (-webkit-appearance: caret) {   

    /* use styles here */
}

Javascript CSS support()。
CSS @supports は、window.CSS.supports メソッドを使用して Javascript で検出されます。仕様では 2 つのメソッドが提供されており、1 つのメソッドは 2 つのパラメーターを受け取ることができます。もう 1 つは文字列 (A) を受け取ることができます。チェックする条件を含む DOMString)、boolValue = CSS.supports(supportCondition); 具体的な使用法については、次の例を参照してください:

//测试环境，Chrome:34.0.1847.131 m
var res01 = CSS.supports("text-decoration-style", "blink");   
//Outputs: false
console.log(res01);   

var res02 = CSS.supports("display", "flex");   
//Outputs: true
console.log(res02);   

var res03 = CSS.supports("( transform-origin: 5% 5% )");   
//Outputs: false
console.log(res03);   

var res04 = CSS.supports("( transform-style: preserve ) or ( -moz-transform-style: preserve ) or " +   
                      "( -o-transform-style: preserve ) or ( -webkit-transform-style: preserve )" );   
//Outputs: false
console.log(res04);

@supports 使用シナリオ

ほとんどの場合、@supports は古いものをサポートするために使用されますまた、可能であれば最新のブラウザの新機能を活用して、ユーザー エクスペリエンスを向上させます。 @supports の最も重要な使用例の 1 つはページ レイアウトです。最近のブラウザの多くは、フレックスボックス Web レイアウトをサポートしていますが、多くのブラウザがそれをサポートしていない場合、コードは次のように記述できます。 @supports 機能の追加により、さらに多くのより優れた使用シナリオが今後も登場します。

以上がCSS @supports タグを使用してブラウザ互換性分析を検出するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。