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/

如果觉得 网站内容还不错，欢迎将 网站 推荐给程序员好友。

查看更多关于css3test的详细内容...