首页 > Javascript

Detect CSS3 Support in Browsers with JavaScript - 懒人日记

当我们使用CSS3新属性,比如:box-shadow或者transition时,会有一个问题出现,我们怎么检测浏览器是否支持这些属性?这里有一个办法,我们...

当我们使用CSS3新属性,比如:box-shadow或者transition时,会有一个问题出现,我们怎么检测浏览器是否支持这些属性?这里有一个办法,我们创建一个javascript函数,该函数将接受一个CSS属性名作为参数,并返回一个boolean值,该boolean值表明浏览器是否支持这个属性。

步骤1:
我们首先需要确定的一件事是,该如何调用这个函数。我们应该把事情想得简单一点。

if ( supports('textShadow') ) {    document.documentElement.className += ' textShadow';}

这就是最终要调用的方法,当我们传入的CSS属性名到这个supports()函数时,他会返回一个boolean值,如果是true,我们就会加一个class在<html>上面,被这个class勾到的样式就会被执行。

步骤2:
接下来我们准备构造这个supports()函数。

var supports = (function() {})();

为什么我们不把这个supports 写成一个标准的function呢?原因是在这个方法执行之前需要做一系列准备的事情,而绝不可能每次调用这个function时反复的去做这些。所以,最好让supports 指向一个有返回值的自执行函数。

步骤3:
为了测试浏览器是否支持这个特殊的属性,我们需要创建一个虚拟的元素。这个元素不会被插入到DOM树种,他只是一个用来做测试的傀儡。

var div = document.createElement('div');

这时你是否已经意识到了在使用CSS3属性时我们会使用一系列的前缀。
-moz
-webkit
-o
-ms
-khtml
在javascript里,我们必须得去遍历它们,所以我们这它们放到一个数组里面,把这个数组起名叫做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()时都再执行一遍。页面加载以后它只执行一次。

return function(prop) {};

这个闭包的好处在于尽管supports()是一个有返回值的function,它仍然可以访问到div、vendors和len变量

步骤4:
马上就测试一下:如果这个传入的属性是div的style中有的变量,我们就认为这个浏览器支持这个属性;所以返回true。

return function(prop) {    if ( prop in div.style ) return true;};

仔细想一下,现在主流浏览器都直接支持text-shadow了,而不需要那个前缀。对于这些浏览器就没必要遍历那个前缀数组了,这就是为什么我们把这个检查过程放到第一行。

步骤5:
大家都习惯写CSS3的属性名字类似这样-moz-box-shadow,然而在firebug里面你去看style对象,你就会发现他被写成MozBoxShadow,像这样的,如果我们测试

'mozboxShadow' in div.style // false

返回false,这就说明这个值是大小写敏感的。

这就意味着我们传入boxShadow 到supports()中,将会失败。所以我们需要事先检查一下传入参数第一个首字母是不是小写的,这样我们就修复了这个问题。

if(prop in div.style) return true;  prop = prop.replace(/^[a-z]/, function(val) {    return val.toUpperCase();  });};

正则表达式解决了这个问题,我们检查这个字符串的首字母是不是小写,如果是则转换成大写字母。

步骤6:
我们接下来需要遍历这个vendors数组。假如传入的是box-shadow,我们需要检测div的style对象中是否存在下面其中的一个。
MozBoxShadow
WebkitBoxShadow
MsBoxShadow
OBoxShadow
KhtmlBoxShadow
如果存在,将会返回true,说明该浏览器支持boxshadows。

return function(prop) {  if ( 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;    }  }};

在这里我们没有必要使用for来遍历这个数组,原因如下:

1. 数组元素的顺序不重要
2. while字符少,写的快
3. while相对for性能好一点点

不要被vendors[len] + prop搞晕,他只是简单地取代那些名字和他们的真实值:MozBoxShadow

步骤7:
但是,如果没有一个值匹配到呢?在这种情况下,浏览器似乎不支持这个属性,所以需要返回false。

while(len--) {  if ( vendors[len] + prop in div.style ) {    return true;  }}return false;

我们测试一下text-stroke(只有webkit内核浏览器支持),如果通过的话就会在<html>上加一个class。

步骤8:使用

如果一个class名字恰好被勾上,我们在样式表中可以这么写:

/* fallback */h1 {  color: black;}/* text-stroke support */.textStroke h1 {  color: white;  -webkit-text-stroke: 2px black;}

最终的源代码

var supports = (function() {  var div = document.createElement('div'),      vendors = 'Khtml Ms O Moz Webkit'.split(' '),      len = vendors.length;  return function(prop) {    if ( 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 ) {        // browser supports box-shadow. Do what you need.        // Or use a bang (!) to test if the browser doesn't.        return true;      }    }    return false;  };})();if ( supports('textShadow') ) {  document.documentElement.className += ' textShadow';}

原文:http://net.tutsplus.com/tutorials/html-css-techniques/quick-tip-detect-css-support-in-browsers-with-javascript/

今天无聊至极,强迫自己找点事情做,于是就尝试着翻译这篇外文博客,第一次做翻译,翻译的不好,请指教。

这篇文章告诉我们,在解决一个问题时该如何设计自己的代码,每一行,每一句代码都有它存在的意义,都应该是确凿无误的。

本文由用户 【admin】 自行上传分享,仅供网友学习交流。所有权归原作者,若您的权利被侵害,请联系管理员。

转载本站原创文章,请注明出处,并保留原始链接、图片水印。

本站是一个以用户分享为主的开源技术平台,欢迎各类分享!

本文地址:http://www.mj85.com/javascript/263.html

分享:

评论 [共0条评论]

  • 这篇文章还没有收到评论,赶紧来抢沙发吧~

您现面为匿名用户,暂不能发表评论。如想评论则请登录注册

相关内容

发布者

管理员 发于:

19年/05月/27日 05时

查看次数: 381

标签 Tags

无标签

谁收藏了?

0人已收藏