使用javascript判断浏览器对css3的支持情况【译】
Quick Tip: Detect CSS3 Support in Browsers with JavaScript
步骤 1
首先我们要确定我们想如何调用 函数。在这里我们会简化我们的方法调用如下：
if ( supports('textShadow') ) {
document.documentElement.className += ' textShadow';
}
这应是最终的函数调用方式，即当我们给supports()函数传递一个CSS属性名称的时候，它会返回一个boolean。如果为true，则将classname附加到documentElement 或<html>上。这样我们就有了一个新的可用类名。
步骤 2
下一步，构建supports()函数。
var supports = (function() { })();
我们为什么不把supports函数构建成标准函数的样子呢？——因为我们需要先做一些准备工作，而我们显然不应当每次调用函数的时候，都去重复这些准备工作。因此，最好使supports函数等于它自己执行的函数所返回的内容（it’s best to make supports equal to whatever is returned from the self-executing function）。
步骤 3
为了测试浏览器是否支持特定的属性，我们需要创建一个“哑巴”元素，这个动态创建的哑巴元素实际上不会插入到DOM中。
var div = document.createElement('div');
相信你已经注意到，当使用CSS3新属性时，我们有很多可以使用的代理前缀：
- -moz
- -webkit
- -o
- -ms
- -khtml
我们的函数需要过滤并检测这些前缀，所以让我们把这些前缀放到一个数组里，数组名为vendors：
var div = document.createElement('div'),
vendors = 'Khtml Ms O Moz Webkit'.split(' ');
的确，使用split()函数从字符串中创建数组比较懒，但是确实很节省时间~~嘿嘿
我们即将通过这个数组来进行过滤，同时也存储一下这个数组的长度。
var div = document.createElement('div'),
vendors = 'Khtml Ms O Moz Webkit'.split(' '),
len = vendors.length;
以上就是supports()的准备工作，因为它是静态的，所以不需要每次调用supports()的时候都执行一次。这也是为什么当页面加载时，我们只执行一次。 现在让我们return实际赋值给supports变量的函数吧。
return function(prop) { };
闭包的魅力在于，即使supports()函数与返回的函数一样，它还是可以使用div，vendors和len变量。
步骤 4
快速检测：如果传递的属性是有效的div style属性，那么浏览器支持这个属性，返回true：
return function(prop) {
if ( prop in div.style ) return true;
};
比如CSS3属性 text-shadow，大多数的现代浏览器都默认支持它，不需要给它添加代理前缀。所以我们没有必要给所有的属性都添加一个代理前缀，也因此我们无需在一开始就检测代理前缀。
步骤 5
你可能喜欢这样写CSS3的属性名称，如 -moz-box-shadow，然而如果在Firebug中查看类型对象（style object），你会发现它拼作MozBoxShadow。因此，如果我们这样检测：
'mozboxShadow' in div.style // false
它会返回false，这个值是大小写敏感的。
这就意味着，如果用户给supprots()函数传参boxShadow会检测失败。所以我们要先检查参数的第一个字母是不是小写。如果是小写，就要转成大写。
这里我们使用了正则表达式来修正它。在上面这段代码中，我们检查了首字母是否是小写（^），如果是小写我们就用toUpperCase()将其转换为大写字母。
步骤 6
下一步我们来用vendors数组进行过滤，检测是否存在匹配的项；比如，如果我们传递box-shadow，我们需要检查div的style属性是否包含以下中的一个：
- MozBoxShadow
- WebkitBoxShadow
- MsBoxShadow
- OBoxShadow
- KhtmlBoxShadow
如果有匹配项，就返回true，因为浏览器本身提供了对box shadows的支持。
- array元素的顺序并不重要
- while语句写起来更快速并且写的字符也更少
- 有一点点的性能提高
不要被vendors[len] + prop这个语句所迷惑，只要把那些名称替换为真实的值就可以了：MozBoxShadow
步骤 7
但是，如果以上的值全都不匹配呢？这种情况下，浏览器很有可能不支持这个属性，那么就应该返回false。
while(len--) {
if ( vendors[len] + prop in div.style ) {
return true;
}
}
return false;
That should do it for our function! Let’s test it out, by applying a className to the html element, if the browser supports, say, the text-stroke property (which only webkit does).
好啦，现在我们来测试一下我们的函数吧！ 通过给html元素添加一个类名称（className），如text-stroke（仅webkit支持），来测试一下吧！
步骤8: 用法
现在我们可以检测类名了，让我们一起测试一下。
最终源代码
使用javascript判断浏览器对css3的支持情况【译】的更多相关文章
- JavaScript判断浏览器类型及版本
JavaScript是前端开发的主要语言,我们可以通过编写JavaScript程序来判断浏览器的类型及版本.JavaScript判断浏览器类型一般有两种办法,一种是根据各种浏览器独有的属性来分辨,另一 ...
- 使用javascript判断浏览器类型
之前在项目中遇到过要针对不同浏览器做不同的一些js或者css操作,后来某个朋友也突然问到这个问题,所以,整理了一下,在这里留个笔记,方便以后使用. 使用javascript判断浏览器类型: funct ...
- 基于JavaScript判断浏览器到底是关闭还是刷新(超准确)
这篇文章主要介绍了基于JavaScript判断浏览器到底是关闭还是刷新(超准确)的相关资料,需要的朋友可以参考下 本文是小编总结的一些核心内容,个人感觉对大家有所帮助,具体内容请看下文: 页面加载时只 ...
- 浏览器对localstorage的支持情况以及localstorage在saas系统中的应用实践思考
首先,还是要说,任何一种新特性的引入,通常有着其特有的场景和解决的目标需求,localstorage也一样.在我们的应用场景中,主要在金融业务服务的saas系统.其中涉及很多更改频率很多的元数据的客户 ...
- 原生JavaScript判断浏览器对CSS属性是否支持
/*判断浏览器是否支持某个css属性*/ function SupportCss(attrName){ var i=0, arr = SupportCss.opt.aBrowser, eleStyle ...
- （转）JavaScript判断浏览器类型及版本
IE 只有IE支持创建ActiveX控件,因此她有一个其他浏览器没有的东西,就是ActiveXObject函数.只要判断window对象存在ActiveXObject函数,就可以明确判断出当前浏览器是 ...
- 《如何使用Javascript判断浏览器终端设备》
WEB开发中如何通过Javascript来判断终端为PC.IOS(iphone).Android呢? 可以通过判断浏览器的userAgent,用正则来判断手机是否是ios和Android客户端. va ...
- 如何使用Javascript判断浏览器终端设备
WEB开发中如何通过Javascript来判断终端为PC.IOS(iphone).Android呢? 可以通过判断浏览器的userAgent,用正则来判断手机是否是ios和Android客户端 var ...
- javascript判断浏览器的版本
在javascript中直接的使用navigator.userAgent就可以获取当前浏览器的版本等信息,以下是列出来的关于不同浏览器显示的值(Windows.Android.iPhone): IE6 ...
随机推荐
- JS之script标签
1.script标签的位置 script标签可以在head标签中,也可以在body标签中 2.async属性 async的目的是不让页面等待js文件的下载和执行,从而异步加载页面中的其他内容.只支持外 ...
- Java学习-030-JSON 之四 -- 判断 JSONObject 是否包含键值对
前文对获取 JSON 数据封装方法,使之可通过类似于 cssSelector 的方法获取 JSON 数据,使获取数据变得简单.敬请参阅:模仿 cssSelector 封装读取 JSON 数据方法. 在 ...
- office-002-onenote、word、outlook取消首字母大小写图文详解
此文主要讲述如何取消微软办公软件 onenote.work.outlook 中首字母大写等的自动更正项,其他 office 办公软件相关设置的操作,可参考此文进行相应的设置.希望能对亲有所帮助,若有错 ...
- navicat premium 导出表结构
1.右键 点击public,然后选择 数据传输 2.选择数据库对象,目标选择文件,选择文件的路径,然后开始
- 虚拟化技术比较 PV HVM
很多人看到同样配置的VPS价格相差很大,甚是不理解,其实VPS使用的虚拟技术种类有很多,如OpenVZ.Xen.KVM.Xen和HVM与PV.在XEN中pv是半虚拟化,hvm是全虚拟化,pv只能用于L ...
- 安装ECshop普遍问题的解决方法
安装ecshop经常会出现以下问题: 1.Strict Standards: Non-static method cls_image::gd_version() should not be calle ...
- pptp记录用户登陆日志
pptp vpn记录用户登录和流量信息(转) 这个问题困扰了我很久,终于在pppd的man文档里,发现了踪迹.在man中的SCRIPTS下有一系列的参数,其中PEERNAME就是登陆的用户名,并且在/ ...
- Java基础之处理事件——实现低级事件监听器（Sketcher 2 implementing a low-level listener）
控制台程序. 定义事件监听器的类必须实现监听器接口.所有的事件监听器接口都扩展了java.util.EventListener接口.这个接口没有声明任何方法,仅仅用于表示监听器对象.使用EventLi ...
- ForkJoin框架
1. 什么是Fork/Join框架 Fork/Join框架是Java7提供了的一个用于并行执行任务的框架, 是一个把大任务分割成若干个小任务,最终汇总每个小任务结果后得到大任务结果的框架. 我们再通过 ...
- GTA项目 一, 包装外部WebService
外部WebService返回的是xml太重了. 而JSON是web的新标准.所以要包装一下. 使用NewtonSoft.JSON的dll里面的JsonConvert.SerializeXmlNode方 ...