如何判断浏览器是否已经支持了某个css属性

12 Sep 2017

Reading time ~1 minute

做H5开发的时候经常会遇到在使用一些css属性时，不知道浏览器是否已经支持了的情况。为了解决这个怎么知道浏览器是否已经支持了某个css属性?问题，我当时是用的js的实现方法，不过今天在看《css揭秘》这本书时还遇到了一种用css就可以实现的方法，在此记录下来。

javascript的实现方式

思路：用js创建一个元素element，然后看element.style里面是否有这个需要被支持的cssAttr 代码实现如下：

function testProperty(property) {
	var root = document.documentElement;
	if (property in root.style) { 
		root.classList.add(property.toLowerCase()); 
		return true;
	}
    root.classList.add('no-' + property.toLowerCase());
	return false;
}

如果我们想要检测某个具体的属性值是否支持，那就需要把它赋给对应的属性，然后再检查浏览器是不是还保存着这个值。很显然，这个过程会改变元素的样式，因此我们需要一个隐藏元素,具体代码如下：

function testValue(id, value, property) { 
	var root = document.documentElement;
    var dummy = document.createElement('p'); 
    dummy.style[property] = value;
    if (dummy.style[property]) { 
        root.classList.add(id); 
        return true;
    }
    root.classList.add('no-' + id);
    return false; 
}

css的实现方式

用css实现的话只需在css代码中使用@supports (testValue),示例代码如下：

@supports (text-shadow: 0 0 .3em gray) { 
    h1 {
       color: transparent;
       text-shadow: 0 0 .3em gray; 
    }
}

需要注意的是到目前为止这种利用@supports来做判断的方式在IE11还不支持，其他的浏览器都支持了，具体看是否已经支持可以点此链接是否已经支持@supports

css