[译]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项目就是用了这个方法。

时间: 2024-10-23 09:54:09

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

用JavaScript检测浏览器

如果你真的需要检测浏览器的类型,用JavaScript很容易实现. View Demo Download Source from GitHub JavaScript有一个navigator的标准对象,它包含了关于浏览器使用的信息. navigator对象由很多属性,但是userAgent属性---一个字符串就已经包含了浏览器.操作系统以及其它我们需要的所有信息. 如果需要显示navigator.userAgent的值,只需要选择下面的一种的方式就可以: Alert // Display in a

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

//检测浏览器对CSS属性的支持 supports = (function() { var div = document.createElement('div'), vendors = 'Khtml Ms O Moz Webkit'.split(' '); return function(prop) { if ( prop in div.style ) return true; var len = vendors.length; prop = prop.replace(/^[a-z]/, fun

JavaScript 检测浏览器是否支持 CSS 变量

JavaScript 检测浏览器是否支持 CSS 变量: const isSupported = window.CSS && window.CSS.supports && window.CSS.supports('--a', 0); if (isSupported) { /* supported */ } else { /* not supported */ } JavaScript 操作 CSS 变量的写法如下: // 设置变量 document.body.style.s

使用JavaScript检测浏览器

假设你真的需要检测浏览器的类型,使用JavaScript非常easy达到. View Demo Download Source from GitHub JavaScript有一个navigator的标准对象,它包括了关于浏览器使用的信息. navigator对象由非常多属性.可是userAgent属性---一个字符串就已经包括了浏览器.操作系统以及其他我们须要的全部信息. 假设须要显示navigator.userAgent的值.仅仅须要选择以下的一种的方式就能够: Alert // Displa

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

这里所说的缩放不是指浏览器大小的缩放,而是指浏览器网页内容的百分比缩放(按Ctrl和+号键或者-号键的缩放).检测这种缩放有很种方法,QQ空间都通过flash来检测浏览器是否处于缩放.这里提供javascript的方法来检测浏览器的缩放.对于 IE6,就直接无视了,因为 IE6 只能对文本进行缩放.先来说说浏览器提供的标准检测接口,window.devicePixelRatio 是设备上物理像素和设备独立像素的比例,该属性就可以用于检测网页是否被缩放了.在普通的 PC 浏览器上,在默认无缩放的情

javascript检测浏览器对音频格式和视频格式的支持情况

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title></title>        <script type="text/javascript">            function checkAudio(){                var myAudio = docume

JavaScript检测浏览器

Detect Browser <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>detect browser</title> </head> <body> <div id="welcome"> <p>欢迎使用 <b></b> detect browser&

浏览器前缀-----[译]Autoprefixer:一个以最好的方式处理浏览器前缀的后处理程序

Autoprefixer解析CSS文件并且添加浏览器前缀到CSS规则里,使用Can I Use的数据来决定哪些前缀是需要的. 所有你需要做的就是把它添加到你的资源构建工具(例如 Grunt)并且可以完全忘记有CSS前缀这东西.尽管按照最新的W3C规范来正常书写你的CSS而不需要浏览器前缀.像这样: a{      transition :transform 1s } Autoprefixer使用一个数据库根据当前浏览器的普及度以及属性支持提供给你前缀: a{      -webkit-trans

javascript学习------浏览器检测

Navigator对象:浏览器对象 该对象包含了浏览器的整体信息 Navigator对象的属性: appName:返回浏览器的名称 appVersion:返回浏览器的版本号 uerAgent:返回浏览器用于HTTP请求的用户代理头的值 appCodeName:返回浏览器的代码号 platform:返回运行浏览器的操作系统或硬件平台 IE中的Navigator属性: cookieEnabled:检测浏览器是否支持Cookie,如果支持返回TRUE,不支持返回FALSE systemLanguage