javascript - 如何检查浏览器是否支持 css 值？

Question

我对 javascript 不是很熟练，所以请多多包涵。 Safari 6 及更低版本和更早的 android 移动浏览器，也许更多不支持 css 值 VH。我的 DIV#id 或类不是视口(viewport)的高度。下面是一个页面的链接，我发现了一些有用的信息，但我真的不确定如何将它与 css 值一起使用:

Check whether a css value is supported

这是为您提供的快捷方式代码:

if('opacity' in document.body.style) {  
   // do stuff
}

function isPropertySupported(property{
   return property in document.body.style;
 }

在我上面附加的链接的评论中，有人问如何检查是否支持 css VALUE，答案是，“你设置它，然后读回值并检查浏览器是否保留它。”现在，我确信如果我了解更多我刚刚开始学习的 javascript，那将是有用的信息。

这就是我的想法，但我真的不确定如何去做。 检查 div#id 或 div.class 是否具有 vh css 值。 检查浏览器是否支持css值。 如果支持，则继续加载。如果不支持，则更改 id 或 class。

总结一下我的问题:

如何使用 javascript 或 jquery 检查浏览器是否支持 css 值？

非常感谢对答案的指导。 感谢您的帮助。

Answer 1

有新的 API CSS.supports .支持 most browsers except IE .

console.log(
  // CSS.supports(property, value)
  1, CSS.supports("text-decoration-style", "blink"),
  2, CSS.supports("display", "flex"),
  3, CSS.supports('--foo', 'red'),
  4, CSS.supports('(--foo: red)'),

  // CSS.supports(DOMstring)
  5, CSS.supports("( transform-origin: 5% 5% )"),
  6, CSS.supports("( transform-style: preserve ) or ( -moz-transform-style: preserve ) or " 
  + "( -o-transform-style: preserve ) or ( -webkit-transform-style: preserve )")
)

CSS 中也有类似的功能，@supports feature query selector , 还有 supported in most browsers except IE :

@supports (display: grid) {
  div {
    display: grid;
  }
}
@supports not (display: grid) {
  div {
    float: right;
  }
}