Web开发中，因为浏览器的不同，CSS的属性支持情况是有不同的。有时候需要判断CSS属性的支持情况做出不一样的设计，或者需要polyfill这个不支持的属性，这时候就需要判断CSS的支持情况。

DOM元素中我们可以通过 DOM API 获取样式声明对象 CSSStyleDeclaration，获取的CSSStyleDeclaration为内联style的css设置属性。CSSStyleDeclaration有两个特点：

  1. 如果我们设置了一个不支持的CSS属性，则CSSStyleDeclaration中也不会出现这个变量名。
  2. 如果我们设置了一个支持的CSS属性，但是设置了一个不支持的值（如: sticky 定位），则CSSStyleDeclaration中对应的变量值还将保持为空值。

我们可以使用这两个特性来判断CSS属性的支持情况。如：

1
2
3
4
5
6
7
8
function cssSupport ({attr, value}) {
    let tempElement = document.createElement('div')
    if(attr in tempElement.style ) {
        tempElement.style[attr] = value
        return tempElement.style[attr] === value
    }
    return false
}