Safari 10 CSS.supports('display'，'contents')即使不受支持也会返回true？

Question

根据CanIUse.com的说法，display:contents有一些跨浏览器的支持。

https://caniuse.com/#feat=css-display-contents

我想在支持该功能的浏览器中启用该功能，并在不支持该功能的浏览器中禁用该功能。

因此，我使用CSS.supports('display', 'contents');来确定它是否受支持。在IE11中，我必须进行额外的检查，因为不支持CSS。

然而，我的期望是在Safari11中，它应该返回true，在Safari10中，它应该返回false。取而代之的是两者都返回true。UI显然在11中看起来是正确的，但是在10中，因为display: contents实际上并不工作，所以有一些不受欢迎的效果，所以我的补丁类没有被应用& UI看起来是错误的。这被确认是由无效特征检测引起的。

我搜索了检测Safari10 (而不是Safari11)的解决方案，但找不到任何有效的解决方案。

如何从JavaScript中准确判断该功能是否受支持/我是否在Safari10中？

Answer 1

这里有一个解决方案：

@supports (display: contents) and (not (-webkit-flow-from: main)) {
  /**/
}

display: contents-check只会在Safari11之前显示false标志，所以我在caniuse上滚动了CSS值，找到了CSS Regions，它只被MS浏览器支持，直到Edge18(不使用Chrome11的渲染引擎的最后一个版本)和Safari11版本。

IE不支持@supports，边缘不支持-webkit-flow-from。

顺便说一句，我还没有测试过这个，因为我没有任何苹果产品。如果有人能做到这一点，那就太好了。