嵌套CSS @supports和@media查詢

我一直在試圖弄清楚是否可以嵌套CSS功能查詢（也稱爲CSS @supports）和常規媒體查詢，以及執行此操作的正確方法是什麼。嵌套CSS @supports和@media查詢

實施例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; 
     } 
    } 
}

來源

2017-02-24 oelna

嵌套媒體查詢似乎在css3中被授權。所以我認爲，功能查詢也可以工作。但跨瀏覽器兼容性是另一回事。 –

@BoltClock謝謝！至少我現在知道我們將來可能會得到這個。我想我回到測試瀏覽器支持，如1999年。 – oelna

Scratch說，如果您只對支持@supports的瀏覽器感興趣，那麼瀏覽器支持似乎很好。我會發佈一個答案。 – BoltClock

兩個例子是根據section 3 of the spec有效的CSS，並暫時他們似乎通過了解雙方@supports規則和嵌套@media規則（also new to CSS3）瀏覽器來一貫支持。

雖然當兩者在滿足@media和@supports條件這兩個例子將只適用的background: blue聲明，

A將應用要麼background: green或background: blue當且僅當所述(min-width: 50em)媒體查詢被滿足;
只有當瀏覽器理解@supports並支持flex-wrap: wrap時，B纔會應用聲明。

因爲你的兩個例子的意思是微妙的不同的東西，你選擇哪一個將取決於你的使用情況：

如果你不想不支持@supports或flex-wrap: wrap看到無論是瀏覽器聲明，而代之以總是應用background: red，選擇B.
否則，如果您想要任何瀏覽器（無論如何理解媒體查詢）在指定的視口寬度應用background: green，即使它永遠不會應用background: blue由於不支持@supports或flex-wrap: wrap，請選擇A.

來源

2017-02-24 12:06:45 BoltClock

嵌套CSS @supports和@media查詢

回答

相關問題