如何检测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自定义属性,因为根据定义,为了解析属性声明,每个名称以其开头的属性都--被视为有效.