原文地址: 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. Ribbon 窗体的 MDI 子窗体使用 TabbedMDIManager 切换时工具条闪屏问题的解决办法

    补充说明: 此问题已经在新版本中解决(15.2.6),方法更加简单,只需要在 MDIChild 窗体的 Create 方法中,将 Ribbon 的 Visible 属性设置为 false 就可以了,且 ...

  2. Mac下生成RSA密钥

    MAC OS自带了OpenSSL,直接在命令行里使用OPENSSL就可以. 打开命令行工具,然后输入 openssl打开openssl,接着只要三句命令就可以搞定. 第一句命令生成1024位私钥: O ...

  3. Swift学习笔记一

    最近计划把Swift语言系统学习一下,然后将MagViewer用这种新语言重构一次,并且优化一下,这里记录一下Swift的学习笔记. Swift和Objective-C相比,在语法和书写形式上做了很多 ...

  4. Codeforces Round #172 (Div. 2) B. Nearest Fraction 二分

    B. Nearest Fraction Time Limit: 20 Sec Memory Limit: 256 MB 题目连接 http://codeforces.com/contest/281/p ...

  5. RapeLay(电车之狼R)的结局介绍 (隐藏结局攻略)

    RapeLay(电车之狼R)的结局介绍 (隐藏结局) 必备知识要让MM怀孕非常easy.起初刚进入调教模式后.仅仅要H一次 MM就開始有时期状态. 生理(连上有红晕) ->不详状态(闭目第一次) ...

  6. Swift 3.0 的 open,public,internal,fileprivate,private 关键字

      import Foundation   /// final的含义保持不变 public final class FinalClass { }   // 这个类在ModuleA的范围外是不能被继承的 ...

  7. JUnit中测试异常抛出的方法

    最近在做TWU关于TDD的作业,对JUnit中测试异常抛出的方法进行了一些学习和思考. 在进行单元测试的时候有的时候需要测试某一方法是否抛出了正确的异常.例如,我有一个方法,里面对一个List进行读取 ...

  8. Android Dalvik虚拟机初识(转)

    原文地址:http://blog.csdn.net/andyxm/article/details/6126907 android虚拟机jvmjava优化linux内核 首先,让我们来思考下面几个问题: ...

  9. cocos2d粒子效果

    第9章 粒子效果 游戏开发者通常使用粒子系统来制作视觉特效.粒子系统能够发射大量细小的粒子并对他们进行渲染,而且效率要远高于渲染同样数目的精灵.粒子系统可以模拟下雨.火焰.雪.爆炸.蒸气拖尾以及其他多 ...

  10. OSGi 学习(二)

    上一篇说了很多虚的东西,现在说点别的. OSGi系统的独立环境下的项目结构以及启动脚本. 先说项目结构,基于equinox的OSGi容器的项目结构如下所示: bin中定义启动脚本,停止脚本之类的. c ...