javascript - 检测 css "flex-box"和 "flex-wrap"支持的正确方法是什么？

Question

我正在寻找一种解决方案，我们如何通过 JavaScript 检测对 css flex-box 和 flex-wrap 的支持。

我知道 modernizr 可以完成这项工作，但我的客户不允许我们在标题部分加载任何脚本，不幸的是，这在加载页脚时不起作用。

在所有类型的浏览器/设备上实现这种检测的正确方法是什么？

Answer 1

how we can detect the support of css flex-box and flex-wrap by JavaScript.

创建一个元素并检查样式属性。如果支持，它将不返回任何内容，即 '' 否则它将返回 undefined。

例如，如果您在 Chrome 中运行以下代码片段，您将得到 undefined for columns 和 '' for flex-包装。

片段:

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

---

虽然您在问题中只提到了 Javascript，但也有一种 CSS 方式进行特征检测。

@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', '');
console.log('columns supported: ' + isColumnSupported);

var isFlexWrapSupported = CSS.supports('flex-wrap', 'wrap');
console.log('flex-wrap supported: ' + isFlexWrapSupported);