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准确判断该功能是否受支持/我是否在Safari 10中？

Answer 1

这是一个解决方案：

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

display: contents-check仅在Safari 11之前引起一个错误的标记，因此我一直在caniuse上滚动浏览CSS值，发现CSS Regions，仅受以下支持： IE，Edge和Safari的版本最高为11。
IE不支持@supports，而Edge不支持-webkit-flow-from。只要Edge不支持该功能（可能不支持），它就可以防水。

由于我没有任何Apple产品，因此我没有对此进行测试。如果有人可以做到，那就太好了。

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

1 个答案: