CSS3 Test

CSS3Test

如何判定一个浏览器对css3的支持情况呢

有这么一个站点http://css3test.com 可以测试浏览器对CSS3的支持情况 对应的Github在这里

原理

实际上浏览器对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;
	}

一个测试用例JSON格式

一组测试示例基本JSON结构
'test case name':{
  title: 'test case name',
    //接下来是test case 类型
	//测试浏览器是否支持 xxx:xxx 的css属性
	//遍历一个元素的style属性  它是一个对象  若这个key存在于 xxx.style 中则表示支持
  properties:{
  	key: value
  },
  values:{  //将会组合成key1:value1  key1:value2  key2:value1  key2:value2 也是判断浏览器是否支持xxx:xxx的属性
  	properties:[key1,key2],
  	cate1:[value1, value2]
  }，
  //根据docoument.querySelector('xxx')判断是否支持  若不持支持这种选择器该语句将报错
  selectors: {
    'name': 'selector'
    'name': ['selector','...']
  },
  //根据matchMedia 函数   matchMedia(mq).media 有值则支持
  'Media queries':{
    'category name': ['mediaquery value', '...']
  },
  //向style标签中写入值  style.textContent =  'xxx'  再根据style.sheet.cssRules.length 判断
	"@rules": {
		"@keyframes": "@keyframes foo"
	}
}

可以看出测试一共分为5个类型

• properties 看浏览器是否支持这个属性以及其属性值
• values 和properties同样 只不过属性以及属性值是由
  
  values中的properties和其他值组合而成
• selectors 选择器
• media query mediaquery表达式支持
• @rules 自定义keyframe支持

CSS3Test 代码逻辑

主要分为4个文件

• csstest.js 程序执行的入口 可以认为就是 main.js
• test.js 测试用例
• utopia.js 创建元素的util.js
• support.js 用于判断浏览器是否支持该属性

csstest.js

Score{} 计分, 存放所有测试用例的个数, 和通过测试用例个数

Test{} 测试类

Test.group 每一类测试对应的处理

入口函数

在csstest.js中的onload中的一个立即执行函数里面

通过

var test = new Test(Specs[spec], spec, Specs[spec].title);

一个一个的取出Spec中的测试用例来执行测试

该立即执行函数是递归调用的, 所以你看不到循环

算是函数式编程的思想哈, 不用for循环

Test的构造函数即执行了测试, 其中调用了Test.group中对应的函数

	for(var id in Test.groups) {
		this.group(id, Test.groups[id]);
	}

其中Test.groups[id]才是真正执行的函数 并返回执行结果

group函数则是组装要测试的key和value

tests = theseTests[feature];
tests = tests instanceof Array? tests : [tests];

support.js

support.js 顾名思义就是真正来判断浏览器是否支持该CSS的类

最核心的property函数

prefixes: ['', '-moz-', '-webkit-', '-o-', '-ms-', 'ms-', '-khtml-'];
for(var i=0; i<_.prefixes.length; i++) {
	var prefixed = _.prefixes[i] + property;
	if(camelCase(prefixed) in inline) {
		return _.property.cached[property] = prefixed;
	}
}

utopia.js

自定义的工具类

根据opt创建元素 还可以append元素, 如果你指定了父元素的话

其他还有一些类型判断type函数 事件处理的bind等