@supports (-webkit-flex-wrap: wrap) 在 Safari 支持时不 return true

Question

我正在使用 Safari 7.x。

我有以下功能查询总是 return 错误。

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

当 safari 确实理解 -webkit-flex-wrap 时，我需要使用什么语法才能 return 为真？

Answer 1

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

这是一个示例特征检测脚本，它向 DOM 中的根元素添加了 supports-webkit-flex-wrap。

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

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

.supports-webkit-flex-wrap {
}

@supports (-webkit-flex-wrap: wrap) 在 Safari 支持时不 return true

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

css

safari

flexbox

browser-feature-detection