使用CSS3檢測彈性盒支持@supports

如果支持我的佈局，我正計劃對其佈局實施Flexbox解決方案，如果支持CSS3的@support{...}查詢，我將檢測功能。使用CSS3檢測彈性盒支持@supports

但我應該測試什麼被支持？由於功能@support查詢查找給定樣式的支持，然後在支持時實現樣式，我應該尋找哪些支持？

換句話說，flexbox支持所有實現的風格是什麼？

我認爲這將是2009年flexbox實施的display:box;，2011年短期實施display:flexbox;，display:flex;爲當前和最終實施規範？

2013-05-08 Irfan Mir

實現display:box/display:flexbox和display:flex的瀏覽器不太可能支持@supports。此外，直到昨天，Firefox不支持flex-wrap。同時，Internet Explorer 11支持display:flex，但不支持@supports。

因此，如果您的用戶可能在任何平臺上使用Firefox/Chrome或在Windows 8上使用MSIE11，那麼您最好使用像Modernizr這樣的JavaScript解決方案，或假設瀏覽器支持display:flex。如果您想支持iPhone，請記住到-webkit-前綴和flex屬性並使用display:-webkit-flex。

由於flexbox自動覆蓋浮動，並且flex屬性允許您覆蓋寬度，因此您可以將非display:flex瀏覽器的CSS與那些瀏覽器混合使用。

來源

2014-03-20 15:07:51

Flexbox的（標準草案）支持+特徵的查詢支持：

歌劇院（12.1）
火狐添加無論是在相同的版本（22）支持相同的版本增加了對既，但不支持柔性包裝，直到28
Android在同一個版本增加了兩個支持（4.4）
的Chrome 21中添加支持Flexbox的，但不支持功能查詢，直到28

沒有專門支持任何舊版Flexbox草稿的瀏覽器都支持功能查詢。

唯一實用的功能，查詢與Flexbox的組合，在這個時間點使用是檢測瀏覽器支持flex-wrap: wrap。然而，支持display: flex而不是flex-wrap: wrap的仍在使用的瀏覽器的數量幾乎是您可以認爲它們在統計學上不顯着的點。

.foo { 
    display: -ms-flexbox; 
    display: -webkit-flex; 
} 

@supports (flex-wrap: wrap) { 
    display: flex; 
}

來源

2015-02-14 13:40:16 cimmanon

使用CSS3檢測彈性盒支持@supports

回答

相關問題