什麼是正確的方法來檢測CSS「柔性盒」和「柔性包裝」的支持？

Question

我正在尋找解決方案我們如何才能detect支持css flex-box和flex-wrap通過JavaScript。

我知道modernizr它可以完成這項工作，但我的客戶端不允許我們在頭部內加載任何腳本，遺憾的是這在加載頁腳時不起作用。

什麼是在各種瀏覽器/設備上實現這種檢測的正確方法？

Answer 1

我們如何檢測到支持css flex-box和flex-wrap的腳本是 JavaScript。

創建一個元素並檢查樣式屬性。如果支持，它將不會返回，即''，否則返回undefined。

例如，如果您在Chrome中運行以下代碼段，則對於flex-wrap，您將得到undefined,columns和''。

片段：

snippet.log('flex = ' + document.createElement("p").style.flex); 
 
snippet.log('columns = ' + document.createElement("p").style.columns); 
 
snippet.log('flex-wrap = ' + document.createElement("p").style.flexWrap);

<script src="https://tjcrowder.github.io/simple-snippets-console/snippet.js"></script>

---

雖然你已經在你的問題中提到只有JavaScript，但有特徵檢測的CSS的方式爲好。

The @supports rule, also called CSS Feature Queries。

您提供了CSS聲明作爲條件，瀏覽器將執行它以返回它是否支持。例如，如果支持flex，以下CSS將應用綠色背景顏色。

@supports (display: flex) { 
    div { background-color: #0f0; } 
} 

瀏覽器支持在所有現代瀏覽器中都不錯，除了IE（像往常一樣）。對於IE和（Safari < 9），當@supports規則失敗時，您需要保留後備選項。

---

結合上述兩個there is an API around that以及您可以在JavaScript中使用做特徵檢測。

var isColumnSupported = CSS.supports('columns', ''); 
 
snippet.log(isColumnSupported); 
 

 
var isFlexWrapSupported = CSS.supports('flex-wrap', 'wrap'); 
 
snippet.log(isFlexWrapSupported);

<script src="https://tjcrowder.github.io/simple-snippets-console/snippet.js"></script>