css3test

css3test 介绍

css3test用于测试浏览器对css3 的支持度。目前各个浏览器对css3 的支持效果不一样，其中IE系的浏览器支持效果最差。  

原理

实际上浏览器对css的支持程度可以使用浏览器的API来得到，而不是运行一个使用了css3的页面来肉眼判断，或者更复杂的使用Phantomcss(对于不同机型 似乎使用Phantomcss行不通？)

属性支持

实际上就是对一个遍历一个元素的style属性对象

若一个属性存在于这个style的key中则支持

var dummy = document.createElement('_'),

inline = dummy.style;

if(testProperty in inline) {

return true;

}

选择器支持

利用 document.querySelector('.selector');

如果不支持这个选择器 该语句会报错

try {

document.querySelector(prefixed);

}catch (e) {}

Media query支持

利用matchMedia()

var matches = matchMedia(test);

return matches.media !== 'invalid' && matches.matches;

Keyframe关键帧

利用sytle.sheet.cssRules.length

var style = document.createElement('style');

style.textContent = '@keyframes foo{}'; // Safari 4 has issues with style.innerhtml

if(style.sheet.cssRules.length > 0) {

return _.atrule.cached[atrule] = prefixed;

}

网站地址:https://css3test.com/

网站描述:检测浏览器对css3的支持度

css3test

官方网站：https://css3test.com/