[译]JavaScript检测浏览器前缀

原文地址: 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项目就是用了这个方法。