不管我们对浏览器类型前缀有多么的讨厌, 我们都不得不每天面对它, 否者有些东西不能正常工作. 这些前缀的用法有两种: 在 CSS 里 (例如 "-moz-") 和在 JS 里. 有一个神奇的 X-Tag https://github.com/mozilla/x-tag 项目里有一段很聪明的 JavaScript 脚本, 可以用来判断当前使用的是什么前缀 -- 让我来展示它是如何工作的!
JavaScript
首先是获取 html 元素声明的样式:
var styles = Windows.getComputedStyle(document.documentElement, ''),
下一步是把这些属性转换成数组对象, 搜索已知的前缀类型, 如果没有发现, 就缺省设置为 Opera 浏览器:
- pre = (Array.prototype.slice
- .call(styles)
- .join('')
- .match(/-(moz|webkit|ms)-/) || (styles.OLink === ''&& ['', 'o'])
- )[1]
发现了 CSS 前缀, 格式化这些前缀就非常容易了:
- 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 = Windows.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)
- };
- })();
效果演示
我的浏览器类型前缀信息
从 HTML 元素上获取 CSS 样式信息是明智的做法. 这个方法假设了这些样式里一定有类型前缀信息, 但是事实未必这样, 不过至少很长时间内这种方法还是好用的. 你认为这种方法如何? 说说你的想法!
来源: http://www.webhek.com/post/vendor-prefix.html