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

Question

我对javascript不太熟练，请耐心等待。 Safari 6及以下版本和较旧的android移动浏览器，甚至更多版本可能不支持css值VH。我的DIV＃id或类不是视口的高度。以下是我找到一些有用信息的页面链接，但我真的不确定如何将其与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

我假设您要检查是否支持vh值，而不是是否专门DIV#id接受它？

function cssPropertyValueSupported(prop, value) {
  var d = document.createElement('div');
  d.style[prop] = value;
  return d.style[prop] === value;
}
cssPropertyValueSupported('width', '1px');
// => true
cssPropertyValueSupported('width', '1vh');
// => maybe true, maybe false (true for me)
cssPropertyValueSupported('width', '1foobar');
// => false

Answer 2

有新的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;
  }
}

Answer 3

我看到您那里的代码。

var styletotest = "PutStyleHere";

if (styletotest in document.body.style)
{
    alert("The " + styletotest + " property is supported");

} else {

    alert("The " + styletotest + " property is NOT supported"); 

}

简单地将要测试的css属性放在其引号中>]

PutStyleHere

并且当您加载文件时，它将显示一个弹出窗口，告诉您它是否起作用。

但是似乎没有必要。

简单搜索：

[属性] CSS W3

其中[property]是您想了解浏览器支持信息的属性。

搜索时

不透明度Css W3

然后单击W3链接...您可以向下滚动，您将在页面的一部分中看到所需的信息，如下所示：

Source

Answer 4

我们可以从JavaScript进行一会儿测试，如果在CSS.supports的上下文中可以使用css规则。

Answer 5

我建议使用Modernizr。

Answer 6

这是我的代码，通过检查样式中的驼峰式道具是否存在来解决完全不受支持的属性，并在可用时使用CSS.supports。