javascript - 如何对 CSS 自定义属性进行功能检测？

Question

有什么方法可以检测浏览器是否支持CSS 自定义属性（例如。color: var(--primary)）？

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

将不胜感激任何建议！

Answer 1

您可以CSS.supports()在 JavaScript 或@supportsCSS 中可靠地使用来检测对自定义属性的支持。每个支持自定义属性的浏览器版本也支持这种特征检测方法。

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

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

请注意，这不需要您声明--primary自定义属性，因为根据定义，名称以开头的每个属性--都被认为是有效的，用于解析属性声明。

Answer 2

我将把它作为一个例子来说明当你没有其他选择时如何处理这种事情，但BoltClock 的答案是在这种情况下要走的路。

---

我希望您可以定义一个，然后检查其值是否通过getComputedStyle. 例如，这Supports custom props? true在 Chrome（支持自定义 CSS 属性）上显示，但Supports custom props? false在 IE11（不支持）上显示：

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);
}