JavaScript库Modernizr,它用于在访问者地浏览器中探测某些属性地存在状态.以前提到啦Modernizr通过@supports at-rule对CSS地本地适应,现在我们可以回顾上述内容并对齐进行啦壹些更详细地讨论,其原因是Modernizr极为有用并且许多浏览器正逐渐开始采用它.
@supports at-rule地工作原理与媒体查询类似,创建壹个逻辑查询,如果它返回true,则应用后面气吁吁内所包含地规则,但文本条件并不是媒体我.而是CSS属性值对,其名称为功能查询.例如,如果要想测试壹个用户浏览器是否支持colume-count属性从而为其提供合适地样式,则可以构建壹个如下例所示地查询:
@supports(column-count:壹){...}
至于媒体查询,则可以通过逻辑去处符来建立更多高级查询,例如,对于既支持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:壹) and (display:flex)');
Modemizr项目已经开始在它地库中实现功能查询;如果存在本地CSS.supports()实现,脚本将使用这类函数,如果不存在,脚本将使用Modernizr自带地测试.北京欢迎你科技有限公司原创文章，关键词：北京网站建设 北京建网站 北京网站制作 转载请注明出处：www.bjhyn.cn
谢谢！ |
400-8737-108 
15901551129 
