您当前位置:图趣网(Tuquu) >> 网页设计教程 >> 移动前端 >> 浏览设计教程

前端编码css@supports

基于浏览器的特性检测大家应该已经很熟悉了,特别是modernizr.js推出来之后。其实w3c也出了规范,可以基于css来做一些特性检测,也就是@supports,这个特性已经有两年多了,之前浏览器支持度不够,现在webkit nightly也开始支持了,也就是说safari 9会支持到,这样的话,Blink+webKit+gecko都支持了,只剩下IE浏览器不支持了,嗯,这样更方便对IE差异化处理了。

 

但是@supports并不能完全替代JS的特性检测方法,它只支持对CSS属性的检测,其它HTML5 api以及webP等技术的检测还是需要JS来完成。

用法:

@supports就像media query一样简单:

					1
2
3
					@supports(prop:value) {
	/* more styles */
}

@supports也允许你用各种复杂的组合来进行特性检测。

基本用法:

					1
2
3
					@supports (display: flex) {
	div { display: flex; }
}

你可以用这种方法来检测各种基本的CSS属性。

not关键词

就像这样:

					1
2
3
					@supports not (display: flex) {
div { float: left; } /* alternative styles */
}

个人感觉有些鸡肋了,支持@supports的浏览器会不支持各种CSS属性么?不过万事没有绝对,这种情况以后还是可能会有。嗯,私有前缀的话可以试试。

多条件检测

					1
2
3
4
5
6
					@supports (display: -webkit-flex) or
(display: -moz-flex) or
(display: flex) {
 
/* use styles here */
}
					1
2
3
4
5
					/* and */
@supports (display: flex) and (-webkit-appearance: caret) {
 
/* something crazy here */
}

你也可以将or和and语句放在一起混用。

					1
2
3
4
5
6
					@supports ((display: -webkit-flex) or
(display: -moz-flex) or
(display: flex)) and (-webkit-appearance: caret) {
 
/* use styles here */
}

或者更复杂的:

					1
2
3
					@supports ( not ((text-align-last:justify) or (-moz-text-align-last:justify) ){/* specific CSS applied to simulate text-align-last:justify */
}

JS方法

同时也可以用javascript来做类似的检测,方法也很简单:

					1
2
					boolValue = CSS.supports(propertyName, value);
boolValue = CSS.supports(supportCondition);

两种方法都可以,会返回一个bool值。比如:

					1
2
3
4
5
6
					result = CSS.supports("text-decoration-style", "blink");
result = CSS.supports("display", "flex");
 
result = CSS.supports("( transform-origin: 5% 5% )");
result = CSS.supports("( transform-style: preserve ) or ( -moz-transform-style: preserve ) or
( -o-transform-style: preserve ) or ( -webkit-transform-style: preserve )" );

用途

最大的用途是做css特性判断的时候,不用再在js(或者传统的js方法)了,用过modernizr.js的同学可能会印象很深刻,modernizr会在html标签上加上各种各样的class来区分,其它js方法也是类似的实现思路。现在可以直接用@supports来区分或者做浏览器差异化了。

浏览器支持

  • chrome 28+
  • opera 12.1+
  • firefox22+
  • safari 9+
  • IE——可能IE12会支持
参考内容:

https://developer.mozilla.org/en-US/docs/Web/CSS/@supports
http://davidwalsh.name/css-supports

[教程作者:admin]
免责声明:本站文章系图趣网整理发布,如需转载,请注明出处,素材资料仅供个人学习与参考,请勿用于商业用途!
本文地址:http://www.tuquu.com/tutorial/wd2110.html
用JavaScript写Web浏览器不是梦
Dreamweaver CC 2014新功能介绍
图趣网微信
建议反馈
×