css - @支持(-webkit-flex-wrap : wrap) doesn't return true when Safari does support it

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 {
}