如何进行CSS自定义属性的特性检测？

Question

有没有办法检测浏览器是否支持CSS自定义属性（例如：color: var(--primary)）？

我需要编写一个脚本，它在不支持自定义属性的浏览器中表现略有不同，但我找不到任何记录的Modernizr测试，也没有关于访问自定义属性的Javascript接口的信息。

非常感谢您的建议！

- Nick F

---

难怪这个问题看起来这么熟悉。我回答了一个重复的问题，真是我的不对。 - BoltClock

啊，我确实搜索了重复项，但我在寻找“自定义属性”（我相信这是官方名称），而不是“CSS变量”。 - Nick F

是的 - 人们称它们为CSS变量，因为这更易于理解，部分原因也是因为该模块被称为“级联变量的自定义属性”，而它们确实是。 - BoltClock

哦，没错，把它们称为CSS变量完全是有道理的。我自己也这么做。常用的另一个名称只会让搜索信息变得更加困难！ - Nick F

Answer 1

你可以在JavaScript中可靠地使用CSS.supports()或在CSS中使用@supports来检测自定义属性的支持情况。支持自定义属性的每个浏览器版本也支持此方法进行特性检测。

if (window.CSS && CSS.supports('color', 'var(--primary)')) {
  document.body.innerHTML = 'Supported';
}

@supports (color: var(--primary)) {
  body {
    background-color: green;
  }
}

请注意，这不需要您声明--primary自定义属性，因为按照定义，任何以--开头的属性名称都被视为解析属性声明的有效属性。

- BoltClock

---

多么直接！ - T.J. Crowder

在调用之前，您可能需要检查CSS.supports是否已定义。 - jcubic

@jcubic：谢谢，已修复。 - BoltClock

以防其他人想知道是否可以在未定义CSS.supports的情况下定义CSS（因此，在调用它之前需要检查CSS.supports，还是检查window.CSS就足够了？）：CSS全局变量是在其初始理由中引入的supports；所有具有CSS全局变量的浏览器都具有CSS.supports。 - Chris Morgan

Answer 2

我将把这个作为一个例子，说明当你没有其他选择时如何处理这种情况，但在这种情况下BoltClock的答案是正确的方法。

---

我希望您能定义一个变量，并检查其值是否传递给getComputedStyle。例如，这在Chrome上显示支持自定义属性？true（支持自定义CSS属性），但在不支持自定义CSS属性的IE11上显示支持自定义属性？false：

function areCSSVarsSupported() {
  var d = document.createElement('div');
  d.id = "test";
  document.body.appendChild(d);
  var pos = getComputedStyle(d).position;
  document.body.removeChild(d);
  return pos === "fixed";
}
console.log("Supports custom props? " + areCSSVarsSupported());

:root{
  --test-vars: fixed;
}

#test {
  position: var(--test-vars);
}

- T.J. Crowder