サポートルール

目次

Section

Browser Support

Javascript Usecases

Logic Operators

Not Operator

And Operator

Or Operator

Selector Testing

Links

定義

@プロパティをサポートすると、スタイルを適用する前にブラウザが特定のプロパティをサポートしているかどうかをテストできます.特定のブレークポイントのスタイルを適用する@ mediaプロパティと同じです.
構文は次のようになります.

@supports (display: grid) {
  #root {
    display: grid;
  }
}

ブラウザサポート

@サポートをサポートするすべてのブラウザをサポートしている場合は、それはあなたのアプリケーションでも使用する時間です.それはあなたがコントロールすることができます本当に素晴らしい機能を提供します.
これはブラウザのサポートです

JavaScriptの

JavaScriptでは、@サポートは、CSSのオブジェクトモデルインターフェイスを介してアクセスすることができますCSSSupportsRule
CSSは、ルールの@サポートを使用して、1つのスタイルルールを含むCSS機能クエリが含まれています.これはドキュメントが返す最初のcssruleです.スタイルシート[ 0 ]CSS規則myrule [ 0 ]は、したがって、csssupportsruleオブジェクトを返します.

let myRules = document.styleSheets[0].cssRules;
console.log(myRules[0]); // a CSSSupportsRule representing the feature query.

JavaScriptにもAPIがあります.ここでいくつかのプロパティをテストすることもできます.

if (window.CSS && window.CSS.supports) {
 // See if API supported in this browser
}

// You can seperate the property and the value.
const supportsGrid = CSS.supports("display", "grid");

// Or you can give all in one
const supportsGrid = CSS.supports("(display: grid)");

論理演算子

4.1 .ノット演算子

指定された規則が本当でないならば、それは規則を適用します

@supports not (display: grid) {
    #root {
        display: flex;
    }
}

4.2 .演算子

両方のケースが真実であるならば、それは規則を適用します

@supports (display: grid) and (display: flex) {}

4.3 .または演算子

それらのうちの少なくとも1つが本当であるならば、それは規則を適用します

@supports (transform-style: preserve) or (-moz-transform-style: preserve) {}

セレクタテスト(試験的)

いくつかのブラウザ(Firefoxなど)で@サポートを使用してセレクタのサポートをテストする方法があります

@supports selector(A > B) {
    .container {

    }
}

リンク

How @supports Works

@supports - CSS: Cascading Style Sheets | MDN