本文介绍两种使用JavaScript判断CSS浏览器私有前缀的方法。方法一通过创建DOM元素并检测特定样式属性（如webkitTransition）来确定前缀；方法二利用getComputedStyle获取所有计算样式，转换为数组后通过正则匹配提取前缀。两种方法均封装为立即执行函数以缓存结果，提升性能。
CSS浏览器前缀检测背景
尽管开发者对浏览器私有前缀感到困扰，但在实际开发中仍必须处理它们，否则部分功能无法正常运行。CSS中的前缀（如“-moz-”）与JavaScript中的处理方式有所不同。X-Tag项目中包含一段高效的JavaScript代码，可用于检测当前浏览器所使用的前缀类型，下文将解析其实现原理。
常见的CSS前缀包括：IE的“-ms-”、旧版Opera的“-o-”、Firefox的“-moz-”以及Safari/Chrome的“-webkit-”。JavaScript提供了多种检测这些前缀的手段。
方法一：基于特性检测
方法一：基于特性检测
// 取浏览器的 CSS 前缀
var prefix = function() {
var div = document.createElement('div');
var cssText = '-webkit-transition:all .1s; -moz-transition:all .1s; -o-transition:all .1s; -ms-transition:all .1s; transition:all .1s;';
div.style.cssText = cssText;
var style = div.style;
if (style.webkitTransition) {
return '-webkit-';
}
if (style.MozTransition) {
return '-moz-';
}
if (style.oTransition) {
return '-o-';
}
if (style.msTransition) {
return '-ms-';
}
return '';
}();该方法通过动态创建一个div元素，依次赋予其带有不同前缀（-webkit-、-moz-、-o-、-ms-）的CSS样式，随后读取元素的style对象。通过检查特定的属性（如style.xxxTransition）是否存在，即可判断当前浏览器支持的前缀类型。
方法二：解析计算样式
方法二：利用getComputedStyle解析所有样式
首先调用window.getComputedStyle获取documentElement的所有计算样式，并将其转换为数组形式以便处理。
var styles = window.getComputedStyle(document.documentElement, '');
var arr = [].slice.call(styles);
console.log(arr);Firefox环境下的数组结果如下
Chrome环境下的数组结果如下
从上述结果可以看出，数组中包含了各浏览器自身实现的CSS属性名称。
将所有属性名连接为一个长字符串，随后使用正则表达式进行匹配，从而提取出对应的前缀。
// 取浏览器的 CSS 前缀
var prefix = function() {
var styles = window.getComputedStyle(document.documentElement, '');
var core = (
Array.prototype.slice
.call(styles)
.join('')
.match(/-(moz|webkit|ms)-/) || (styles.OLink === '' && ['', 'o'])
)[1];
return '-' + core + '-';
}();对比可见，方法二的代码量显著少于方法一。无论采用哪种方法，均建议将逻辑封装在匿名函数中一次性执行并返回结果，避免每次检测时重复调用函数，从而提升性能。
以上介绍了两种利用JavaScript判断CSS浏览器前缀的技术方案，供开发者参考选用。