Javascript Safari 10 CSS.supports（'；display'；，'；contents'；）即使不受支持也返回true？

据CanIUse.com称，

display:contents

具有跨浏览器的支持

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

所以，我使用

CSS.supports（'display'，'contents'）

以确定是否支持它。在IE11中，我必须进行额外检查，因为不支持

CSS

然而，我的期望是，在Safari11中，它应该返回

true

，而在Safari10中，它应该返回

false

。相反，所发生的是返回

true

。在11中，UI看起来显然是正确的，但是在10中，出现了不希望出现的效果，因为

display:contents

实际上不起作用，所以我的补丁类没有被应用&UI看起来是错误的。这被确认是由无效的特征检测引起的

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

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

这里有一个解决方案：

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

display:contents

-检查只会在Safari 11之前引发一个错误标志，因此我一直滚动浏览并找到了上的CSS值，这仅在Edge 18之前的MS浏览器支持（最新版本不使用Chrome的渲染引擎）和Safari版本，最多11个。
IE不支持

@支持
，Edge不支持
-webkit流自

顺便说一句，我没有测试过这个，因为我没有任何苹果产品。如果有人能做到这一点，那就太好了。
您是否尝试过
CSS.supports（（（display:contents；）”）
？API可能有缺陷，当两个参数的形式不起作用时，这种替代形式有时会起作用编辑oh well 11.1应该是在它开始的时候working@pointy感谢您的回复
CSS.supports（‘（display:contents’）
在Safari 10和Safari 11中返回
true
。
CSS.supports（‘（display:contents；）’）
在Safari 11中返回
false
。没有检查10。我尝试了有空格和没有空格。嗯，我得到了这个
const isSafari10=window.RTCDataChannel==未定义&（函数（p）{return p.toString（）==“[object SafariRemoteNotification]”；}（！window['safari']| | safari.pushNotification）；
这似乎在10和11中按“预期”工作。现在我必须检查所有其他浏览器。我不确定语法中的分号，很抱歉，这个查询在我的初步测试中似乎工作得很好。好主意！