zoukankan      html  css  js  c++  java
  • 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 每一类测试对应的处理

    入口函数
    Alt text

    在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等

  • 相关阅读:
    1093 Count PAT's(25 分)
    1089 Insert or Merge(25 分)
    1088 Rational Arithmetic(20 分)
    1081 Rational Sum(20 分)
    1069 The Black Hole of Numbers(20 分)
    1059 Prime Factors(25 分)
    1050 String Subtraction (20)
    根据生日计算员工年龄
    动态获取当前日期和时间
    对计数结果进行4舍5入
  • 原文地址:https://www.cnblogs.com/cart55free99/p/4965183.html
Copyright © 2011-2022 走看看