web-dev-qa-db-ja.com

CSS @supportsおよび@mediaクエリのネスト

私は、CSS機能クエリ（「CSS @supports」とも呼ばれます）と通常のメディアクエリをネストできるかどうか、およびそれを行うための正しい方法は何かを考えています。

例A機能クエリメディアクエリを示しています==
例Bメディアクエリ機能クエリ。

入れ子にすることも可能ですか？もしそうなら、好ましい入れ子スタイルはありますか？ AまたはB？

.foo {
    background: red;
}

/* EXAMPLE A */
@media (min-width: 50em) {
    .foo {
        background: green;
    }

    @supports (flex-wrap: wrap) {
        .foo {
            background: blue;
        }
    }
}

/* EXAMPLE B */
@supports (flex-wrap: wrap) {
    .foo {
        background: green;
    }

    @media (min-width: 50em) {
        .foo {
            background: blue;
        }
    }
}
cssmedia-queriesfeature-detection
19
oelna

どちらの例も 仕様のセクション に従って有効なCSSであり、当面の間、@supportsルールとネストされた@mediaルールの両方を理解するブラウザによって一貫してサポートされているようです（ また、 CSS ​​）。

bothbackground: blueと@mediaの条件が満たされた場合、どちらの例でも@supports宣言のみが適用されますが、

  • background: greenメディアクエリが満たされた場合にのみ、Aはbackground: blueまたは(min-width: 50em)を適用します。
  • Bは、ブラウザが@supportsを理解し、flex-wrap: wrapをサポートしている場合にのみ、どちらかの宣言を適用します。

2つの例は微妙に異なることを意味するため、どちらを選択するかはユースケースによって異なります。

  • @supportsまたはflex-wrap: wrapをサポートしていないブラウザにどちらかの宣言を表示させず、代わりに常にbackground: redを適用する場合は、Bを選択します。
  • それ以外の場合、background: greenまたはbackground: blueがサポートされていないために@supportsが適用されない場合でも、指定されたビューポート幅で（いずれにせよメディアクエリを理解する）ブラウザーにflex-wrap: wrapを適用する場合は、Aを選択します。
19
BoltClock