这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
在项目中需要快速检测浏览器是否支持某 CSS3 特性,比如检测是否支持 "transform",然后我的布局会有两种完全不同的版式
在项目中需要快速检测浏览器是否支持某 CSS3 特性,比如检测是否支持 "transform",然后我的布局会有两种完全不同的版式。
当然除开本文介绍的这种快速方法,还有一种更有名和更通用的方法,那就是 modernizr,运行脚本之后它会在 html 的 class 上加上浏览器支持的所有特性的列表。
优点:
js 是可配置的,不需要的特性检测可以在配置脚本中去掉基于特性检测 js 库简单好用
除此之外还有一种不太好的方法,那就是判断浏览器的 UA,不好的原因是 UA 可能会伪造,而且版本判断繁琐,还有不稳定。
优点:性能可能是最优的
最后就是本文介绍的这个方法,我写了一个函数快速检测是否浏览器支持某 CSS 特性,适合的场景是快速需要知道浏览器是否支持某一个 CSS 特性(而不是好几个)。
优点:
性能不错通用性强适合检测单个 CSS 特性
- var supports = (function() {
- var div = document.createElement('div'),
- vendors = 'Khtml O Moz webkit'.split(' '),
- len = vendors.length;
- return function(prop) {
- if ( prop in div.style ) return true;
- if ('-ms-' + prop in div.style) return true;
- prop = prop.replace(/^[a-z]/, function(val) {
- return val.toUpperCase();
- });
- while(len--) {
- if ( vendors[len] + prop in div.style ) {
- return true;
- }
- }
- return false;
- };
- })();
- if ( supports('textShadow') ) {
- document.documentElement.className += ' textShadow';
- }
这就是最终代码,原理是:
1. 创建一个 div,然后可以获得 div.style,这是它所支持的属性的数组列表。
2. 检查 text 是否包含在数组中,如果是,直接返回 true。
3. 检查各种前缀,比如 Webkit 加上 text,即 webkitTransition,如果包含在 style 中,返回 true。
4. 值得注意的是在 CSS 中属性名为:-webkit-transition,但是在 DOM 的 style 中 ,却是对应 webkitTransition。我也不知道为什么会这样。
参考资料:http://net.tutsplus.com/tutorials/html-css-techniques/quick-tip-detect-css-support-in-browsers-with-javascript/
来源: http://www.phperz.com/article/17/0416/281591.html