Question

有没有办法检测浏览器是否支持CSS custom properties（例如color: var(--primary)）？

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

对任何建议都会感激不尽！

Answer 1

您可以在JavaScript中可靠地使用CSS.supports()或在CSS中使用@supports来检测对自定义属性的支持。支持custom properties的每个浏览器的每个版本也支持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;
  }
}

请注意，这不要求您声明--primary自定义属性，因为定义every property whose name begins with -- is considered valid用于解析属性声明。

Answer 2

我会留下这个作为一个例子，当你没有替代方法时如何处理这类事情，但BoltClock's answer是这种情况下的方法。

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

＆＃13;

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

＆＃13;

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

＆＃13;

如何检测CSS自定义属性？

2 个答案: