私は、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;
}
}
}
どちらの例も 仕様のセクション に従って有効なCSSであり、当面の間、@supports
ルールとネストされた@media
ルールの両方を理解するブラウザによって一貫してサポートされているようです( また、 CSS )。
bothbackground: blue
と@media
の条件が満たされた場合、どちらの例でも@supports
宣言のみが適用されますが、
background: green
メディアクエリが満たされた場合にのみ、Aはbackground: blue
または(min-width: 50em)
を適用します。@supports
を理解し、flex-wrap: wrap
をサポートしている場合にのみ、どちらかの宣言を適用します。2つの例は微妙に異なることを意味するため、どちらを選択するかはユースケースによって異なります。
@supports
またはflex-wrap: wrap
をサポートしていないブラウザにどちらかの宣言を表示させず、代わりに常にbackground: red
を適用する場合は、Bを選択します。background: green
またはbackground: blue
がサポートされていないために@supports
が適用されない場合でも、指定されたビューポート幅で(いずれにせよメディアクエリを理解する)ブラウザーにflex-wrap: wrap
を適用する場合は、Aを選択します。