网页代码如何做功能查询

时间：2014-7-22

  JavaScript库Modernizr,它用于在访问者的浏览器中探测某些属性的存在状态.以前提到了Modernizr通过@supports at-rule对CSS的本地适应,现在我们可以回顾上述内容并对齐进行了一些更详细的讨论,其原因是Modernizr极为有用并且许多浏览器正逐渐开始采用它.
  @supports at-rule的工作原理与媒体查询类似,创建一个逻辑查询,如果它返回true,则应用后面气吁吁内所包含的规则,但文本条件并不是媒体我.而是CSS属性值对,其名称为功能查询.例如,如果要想测试一个用户浏览器是否支持colume-count属性从而为其提供合适的样式,则可以构建一个如下例所示的查询:
  @supports(column-count:1){...}
  至于媒体查询,则可以通过逻辑去处符来建立更多高级查询,例如,对于既支持column-count属性又box-sizing属性的浏览器,下面的查询使用了and 运算符来为其提供样式:
   还可以使用or运算符来建立可以探测被定义的特性的查询,在处理供应商预设的特性时,这个操作极为有用,在下面的示例中,hyphens和-moz-hyphen属性都被再次测试,只要其中一个受到支持,规则就会被应用:
  @supports(-moz-hyphens:auto) or (hyphens:auto){...}
  not运算符允许为不支持给定属性的浏览器提供样式.(注意,与其他运算符不同,这个运算符必须位于parethese内部)
  @supports(not (-webkit-hyphens:auto)){...}
  功能查询包含一个与at-rule一样容易使用的API.例如,通过将一个属性-值对作为两个参数传递给CSS.supports()类函数,就可以探测一个单一特性,下面的例子测试了display属性的flex值:
  var supports= CSS.supports('display','flex');
  还可以将全部查询做为一个单一参数传递给CSS.supports()类函数,这些查询像字符串一样被置于引号内:
  var supports = CSS.supports('(column-count:1) and (display:flex)');
  Modemizr项目已经开始在它的库中实现功能查询;如果存在本地CSS.supports()实现,脚本将使用这类函数,如果不存在,脚本将使用Modernizr自带的测试.