クエリ機能を@supports

つまり、ブラウザがCSSの属性値をサポートしているかどうかを検出するためのものであり、一緒にロジック、およびロジックまたはロジックにより非組み合わせ、このプロパティは、拡張CSS2.0として導入され、@supportsルールのクエリ機能です。主な目的は、別のブラウザではCSSのサポートのレベルに応じたスタイルの特性を記述することができることです。

1.基本的な使い方

/*html部分*/
/*   <div class="box"><div>   */
/*css部分*/
.box{
    width:200px;
    height:200px;
    margin:30px auto;
    background-color:red;
}
@supports (filter:blur(10px)){
    .box{
        background-color:green;
    }
}
/*用法*/
@supports (写入需要进行判断的css属性，为bool值)){
   为true的时候执行，为false的时候忽略
}

Googleのブラウザ、検証を容易にするためにして、次の例ので、

これは、-moz-カラムギャップと判定された場合：40ピクセル

判定条件は、列の間隔のとき：40ピクセル

一方の式をサポートしているにも@supports

/*逻辑与*/
@supports ((color:red) and (font-size:14px){
    
}
/*逻辑或*/
@supports ((color:red) or (font-size:14px)){
    
}
/*逻辑非*/
@supports (not color:red){
    
}

ブラケット条件の使用を必要とする構図決意を行う場合、また、組み合わせの実施形態の表現をサポートする、正常と判断することができます

@supports ((not (color:#fff) and (font-size:14px))or(background-color:#666)){}