当Safari支持它时，@ suppports（-webkit-flex-wrap：wrap）不会返回true

Question

我正在使用Safari 7.x.

我有以下功能查询，它始终返回false。

@supports (-webkit-flex-wrap: wrap) {
}

当safari理解-webkit-flex-wrap时，我需要使用什么语法才能返回true？

Answer 1

很抱歉让人失望，但Safari目前不支持CSS @supports规则。 According to caniuse.com和MDN，仅在Firefox 22 +，Chrome 28+和Opera 12.1+中支持。您仍然必须对Internet Explorer和Safari使用基于JavaScript的功能检测。

以下是一个示例功能检测脚本，它将supports-webkit-flex-wrap添加到DOM中的根元素。

if ('webkitFlexWrap' in document.documentElement.style) {
    document.documentElement.classList.add('supports-webkit-flex-wrap');
}

然后您可以使用该类名称来应用样式。

.supports-webkit-flex-wrap {
}