原文地址: Detect Vendor Prefix with JavaScript

不管浏览器私有前缀的现状如何,我们还是要与之为伴,并且有时候还需要利用它来做一些事情。这些前缀可以用于CSS(比如 -moz-element 中的 -moz- )和JavaScript( navigator.mozApps )的格式化。牛逼的X-Tag项目使用了一个很巧妙的方法在浏览器环境中获取前缀 —— 让我们来看一下是如何实现的吧!

demo


首先,获取HTML元素的 CSSStyleDeclaration :

var styles = window.getComputedStyle(document.documentElement, ''),

下一步,将获取到的 CSSStyleDeclaration 转换为数组对象,并且与我们已知的前缀匹配,如果没有匹配到,我们就赋值给Opera前缀:

pre = (Array.prototype.slice
.call(styles)
.join('')
.match(/-(moz|webkit|ms)-/) || (styles.OLink === '' && ['', 'o'])
)[1]

获取到了CSS前缀,JS前缀就简单的多了:

 dom = ('WebKit|Moz|MS|O').match(new RegExp('(' + pre + ')', 'i'))[1];
return {
dom: dom,
lowercase: pre,
css: '-' + pre + '-',
js: pre[0].toUpperCase() + pre.substr(1)
}

返回值是像下面形式的对象:

Object {dom: "WebKit", lowercase: "webkit", css: "-webkit-", js: "Webkit"}

完整的实现如下:

var prefix = (function () {
var styles = window.getComputedStyle(document.documentElement, ''),
pre = (Array.prototype.slice
.call(styles)
.join('')
.match(/-(moz|webkit|ms)-/) || (styles.OLink === '' && ['', 'o'])
)[1],
dom = ('WebKit|Moz|MS|O').match(new RegExp('(' + pre + ')', 'i'))[1];
return {
dom: dom,
lowercase: pre,
css: '-' + pre + '-',
js: pre[0].toUpperCase() + pre.substr(1)
};
})();

demo


从HTML元素中获取 CSSStyleDeclaration 的方法很独到。这个方法说明在样式声明里,总有一些一些带前缀的属性,虽然他们不那么找人喜欢。这个方法在未来很长一段时间都是有效的。你觉得这个方法怎么样呢?


翻译的不怎样,文章挺短,看原文体验更好(囧。。)。Ratchet项目就是用了这个方法。

[译]JavaScript检测浏览器前缀的更多相关文章

  1. Javascript检测浏览器对CSS属性的支持 /* supports */

    //检测浏览器对CSS属性的支持 supports = (function() { var div = document.createElement('div'), vendors = 'Khtml ...

  2. 用 JavaScript 检测浏览器在线/离线状态(JavaScript API — navigator.onLine)

    如今HTML5 移动应用或 Web app 中越来越普遍的使用了离线浏览技术,所以用 JavaScript 检测浏览器在线/离线状态非常常见. 无论浏览器是否在线,navigator.onLine 属 ...

  3. 使用JavaScript检测浏览器

    假设你真的需要检测浏览器的类型,使用JavaScript非常easy达到. View Demo Download Source from GitHub JavaScript有一个navigator的标 ...

  4. javascript检测浏览器的缩放状态实现代码 是指浏览器网页内容的百分比缩放(按Ctrl和+号键或者-号键的缩放)

    这里所说的缩放不是指浏览器大小的缩放,而是指浏览器网页内容的百分比缩放(按Ctrl和+号键或者-号键的缩放).检测这种缩放有很种方法,QQ空间都通过flash来检测浏览器是否处于缩放.这里提供java ...

  5. javascript 检测浏览器类型和版本的代码

    方法1:对象/特征检测法 该方法是一种判断浏览器能力(而非浏览器的确切型号)的通用方法.大部分JS专家认为这个方法最合适,因为他们认为按照该方法所编写的脚本是经得起未来考验的. //获取IE浏览器的版 ...

  6. JavaScript检测浏览器

    Detect Browser <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> ...

  7. 使用javascript判断浏览器对css3的支持情况【译】

    Quick Tip: Detect CSS3 Support in Browsers with JavaScript Jeffrey Way on Nov 15th 2010  步骤 1 首先我们要确 ...

  8. [译]Autoprefixer:用最可行的方式处理浏览器前缀的CSS后处理器

    Autoprefixer,通过Can I Use数据库来确定哪些浏览器前缀是需要的,然后解析CSS文件,将前缀添加到CSS规则里. 你所要做的就是添加你的资源构建工具(比如:Grunt),然后你就可以 ...

  9. [转]JavaScript快速检测浏览器对CSS3特性的支持

    转自:https://yuguo.us/weblog/detect-css-support-in-browsers-with-javascript/ ------------------------- ...

随机推荐

  1. JSF教程(10)——生命周期之Update Model Values Phase

    在整个JSF生命周期中经历了取值.验证的阶段终于从request中拿到合理的值,以下就是在本阶段给相应的服务端对象(ManageBean)赋值了.JSF实现仅仅是去更新和input组件中value属性 ...

  2. Codeforces Round #280 (Div. 2) D. Vanya and Computer Game 二分

    D. Vanya and Computer Game Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://codeforces.com/contes ...

  3. java web servlet

    一.什么是Servlet Servlet是一种小型的Java程序,它扩展了Web服务器的功能.作为一种服务器端的应用,他是运行在Servlet容器当中,例如Tomcat就是一种流行的Servlet容器 ...

  4. 也谈读书和书籍选择问题(C#)

    前言 读到一篇.net程序员应该看什么书?深有感触.以前曾经用C#也开发过几年的东西.在那里对相关语言和开发都有了一定的了解.这里,结合自己当初的一些体会和见识把一些比较好的书籍也和大家分享一下.这一 ...

  5. 安装 Nginx 并配置负载均衡

    1,在节点 192.168.1.40 上执行安装 nginx,操作如下: 01 02 03 sudo apt-add-repository ppa:nginx/development sudo apt ...

  6. iOS开发——图形与动画篇OC篇&图层基本上动画

    图层的一些基本动画效果 #define kRadianToDegrees (radian) (radian * 180.0) / (M_PI) //闪烁 [self.testView.layer ad ...

  7. 一天一个mysql函数(二) FIND_IN_SET()

    in和FILD_IN_SET() 的区别: select id, list, name from table where FIND_IN_SET( 'daodao' , list) 所以如果list是 ...

  8. BUG: GetDC() ReleaseDC()引起的内存泄漏

    调用CWnd::GetDC函数跟CWnd::ReleaseDC函数的代码运行时,会出现 4 个字节的内存泄漏. Microsoft 已经确认这是在本文开头部分列出的 Microsoft 产品中的缺陷. ...

  9. ASP.NET MVC and jqGrid 学习笔记 4-排序

    排序(Sorting)分为两种:客户端排序和服务端排序 客户端排序的意思是把数据从数据库里一次性全部提取出来,然后在客户端进行排序,以后每次点击标题进行排序时,就不会给服务端传递请求了.这个“一次性” ...

  10. uva 699 The Falling Leaves dfs实现

    额,刘汝佳小白里面的配套题目. 题目求二叉树同垂直线上结点值的和. 可以用二叉树做,挺水的其实. 尝试使用dfs实现了:开一个大点的数组,根节点为最中间那点,然后读取时就可以进行和的计算了. 代码: ...