object-fit：根据 Mozilla 和 caniuse 覆盖兼容性差异

Question

我想知道哪些浏览器支持 CSS 属性 object-fit: cover。我通常混合使用Mozilla browser compatibility table 和caniuse，但是，它们提供的信息略有不同。例如，在 Mozilla 上，支持 Chrome for Android 版本 31，但是，caniuse 声明至少支持版本 84。什么是正确的/上述差异的原因是什么？

如何测试适用于 Android 版本 55 的 Chrome 的 object-fit: cover 属性？使用 lambda 之类的东西不支持在移动设备上选择不同的浏览器（就像他们在桌面上所做的那样），并且会提供最新版本的浏览器。

从长远来看，未来我应该依靠哪一个？

Answer 1

不，它们匹配。

CanIUse 上的黑条代表浏览器的当前版本（绿色表示支持）。 Mozilla 列出了支持该功能的第一个版本。所以他们确实说同样的话。只是 Mozilla 期望您根据您的用户找出最新的版本。

如果 CanIUse 未显示“以前的”版本，则仅表示它们没有足够的测试数据可说。所以在那种情况下，Mozilla 似乎有更多的细节。也就是说，Chrome 已经在很长一段时间内实现了跨平台的功能相当，所以您通常关注桌面专栏是安全的。

如果您只想在浏览器支持时使用某个功能，请使用@supports，如下所示：

@supports (object-fit: cover){ 
/* css styles for matching browsers */ 

}

这些工作就像覆盖先前定义和较低特异性的媒体查询一样。