有新的API CSS.supports。支持大多数浏览器，除了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，除了IE之外，大多数浏览器都支持该特性：

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

我假设您的意思是检查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

EDIT：这个已经过时了; CSS.supports现在得到了很好的支持，应该改用它。请改用this answer。

我们可以从javascript测试css规则是否在CSS.supports上下文中可用。
（自 * 火狐22/ Chrome 28* 起）

console.log(
CSS.supports("( transform-origin: 5% 5% )"),
"\n",
CSS.supports("( display: flex )"),
"\n ",
CSS.supports("( background-color: #12233212 )")
)

supports（）静态方法返回一个布尔值，指示浏览器是否支持给定的CSS功能。
https://developer.mozilla.org/en-US/docs/Web/API/CSS/supports
To go further, we can possibly use this property for browser detection.

我看到你的密码了。

var styletotest = "PutStyleHere";

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

} else {

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

}

只需将您要测试的css属性放在引号中
在此放置样式
当你加载文件时，它会显示一个弹出窗口，告诉你它是否工作。
然而，这似乎没有必要。
简单的谷歌搜索：
[属性] css W3
其中[property]是要了解浏览器支持信息的属性。
当我搜索
不透明度Css W3
然后单击W3链接...您可以向下滚动，您将看到页面的一个部分，其中包含您想要的信息，如下所示：

Source

我建议使用Modernizr。
Modernizr是一个JavaScript库，它可以检测访问者的浏览器支持哪些HTML5和CSS3功能。在检测功能支持时，它允许开发人员测试一些新技术，然后为不支持这些技术的浏览器提供后备。
一些有用的链接：

• Modernizr: the feature detection library for HTML5/CSS3
• Using Modernizr to detect HTML5 features and provide fallbacks
• HTML5 Boilerplate custom build of Modernizr for feature detection

使用新的CSS @supports特性，你可以在CSS和JavaScript中实现。
CSS：

@supports(width: 1vh) {
  div#id {
    width: 1vh;
  }
}
/* Use at `@supports not` if you want to give an `else` condition */
@supports not (width: 1vh) {
  div#id {
    width: 3%;
  }
}

JavaScript方式：CSS API中提供了supports()方法来执行此操作。

if(CSS.supports('width', '1vh')) {
  document.querySelector('div#id').style.width = '1vh';
} else {
  documen.querySelector('div#id').style.width = '1%';
}

请访问CSS Conditional Rules了解更多信息

这是我的代码，通过检查样式中是否存在驼峰式 prop 来说明完全不支持的属性，如果可用，则使用CSS.supports。

const prefixes = ['', '-webkit-']

function supports(prop, value) {
  if ('CSS' in window && 'supports' in window.CSS) {
    for (let i = 0; i < prefixes.length; i++) {
      const property = prefixes[i] + prop

      if (window.CSS.supports(property, value) ) { return true }
    }
    return false
  }

  const el = document.createElement('div')

  let found = false
  prefixes.forEach((pr) => {
    if (found) return
    const p = `${pr}${prop}`
    const Prop = p.replace(/-(.)/g, (m, s) => s.toUpperCase())
    if (!(Prop in el.style)) return
    el.style[p] = value
    found = el.style[p] == value // can just check if it's not empty actually
  })
  return found
}

在Chromium浏览器中，从100版开始，您现在可以使用DevTools检查是否支持特定声明（属性+值）。
下面是我使用Chrome 101（Beta）的网站截图，它是first Chromium version to supportfont-palette属性：

您可以在绿色框中看到具有以下条件的@supports规则：

@supports (font-palette: dark) or (font-palette: light)

在Chrome 101中，以下两个声明

font-palette: light;
font-palette: dark;

得到支持。
与上面的答案不同，这是一个纯粹的DevTools -〉Styles解决方案来确定浏览器中的支持。