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

Question

有什么方法可以检测浏览器是否支持CSS custom properties（例如color: var(--primary)）？

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

如有任何建议，我们将不胜感激！

Answer 1

我会把这个作为一个例子，说明当你没有其他选择时如何处理这类事情，但是这种情况下的方法。

我希望您可以定义一个，然后检查它的值是否传到了 getComputedStyle。例如，这在 Chrome 上显示 Supports custom props? true（支持自定义 CSS 属性），但在 IE11 上显示 Supports custom props? 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);
}

Answer 2

您可以可靠地使用 JavaScript 中的 CSS.supports() 或 CSS 中的 @supports 来检测对自定义属性的支持。支持 custom properties also supports this method of feature detection.

的每个浏览器的每个版本

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

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

请注意，根据定义 every property whose name begins with -- is considered valid，这不需要您声明 --primary 自定义属性，以便解析属性声明。

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

How to feature detect for CSS custom properties?

javascript

css

feature-detection

modernizr

css-variables