Safari 10 CSS.supports('display', 'contents') 返回真，即使它不受支持? [英] Safari 10 CSS.supports('display', 'contents') returns true even though it is not supported?

问题描述

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

According to CanIUse.com, display:contents has some support across browsers.

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

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

I would like to enable the feature in browsers which support and disable the feature in browsers which do not support.

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

So, I use CSS.supports('display', 'contents'); to determine if it is supported or not. In IE11, I have to make an extra check because CSS is not supported.

但是，我的期望是在 Safari11 中，它应该返回 true，而在 Safari10 中，它应该返回 false.相反，两者都返回 true.UI 在 11 中显然看起来是正确的，但是在 10 中，由于 display: contents 实际上不起作用，因此存在不良影响，因此未应用我的补丁类 &用户界面看起来不对.确认是由于特征检测无效造成的.

However, my expectation is that in Safari11, it should return true, and in Safari10, it should return false. Instead what happens is both return true. The UI clearly looks correct in 11, however in 10, there are undesirable effects because display: contents does not actually work, so my patch-class is not applied & UI looks wrong. This is confirmed to be caused by the invalid feature detection.

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

I searched for solutions to detect Safari10 (and not Safari11), but unable to find anything that works.

如何从 JavaScript 准确判断该功能是否受支持/我使用的是 Safari 10?

How can I tell from JavaScript accurately wether or not the feature is supported / I am in Safari 10?

推荐答案

这是一个解决方案:

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

display: contents-check 只会在 Safari 11 之前引发错误标志，所以我一直在浏览 caniuse 并找到了 CSS 区域，其中仅支持最高 Edge 18(不使用 Chrome 渲染引擎的最后一个版本)和最高 11 的 Safari 版本的 MS 浏览器.
IE 不支持 @supports 和 Edge不支持 -webkit-flow-from.

the display: contents-check only raises a false flag up to Safari 11, so I've been scrolling through the CSS values on caniuse and found CSS Regions, which is only supported by MS browsers up to Edge 18 (the last version that doesn't use Chrome's rendering engine) and Safari versions up to 11.
IE doesn't support @supports and Edge doesn't support -webkit-flow-from.

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

I haven't tested this, by the way, since I don't own any Apple products. If someone could do that, that would be great.

这篇关于Safari 10 CSS.supports('display', 'contents') 返回真，即使它不受支持?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！