本文介绍如何利用JavaScript检测浏览器支持的CSS3内核前缀。通过枚举webkit、moz等前缀并检查style对象属性，可判断浏览器是否支持CSS3特性。文章提供了完整的检测函数代码，并探讨了在图片轮播等场景中结合CSS3与JS动画以提升性能的最佳实践。
JavaScript检测浏览器CSS3内核前缀的方法
在前端开发中，我们常需了解JavaScript如何操作行内样式。
开发过程中，有时需要判断浏览器所采用的内核前缀，以便针对不同浏览器执行特定的处理逻辑。
例如，通过alert(element.style.webkitTransition)可以获取以webkit为前缀的transition属性值。若浏览器非webkit内核，该操作将返回undefined。我们可以将所有可能的内核前缀枚举出来，通过获取对应CSS属性值来进行判断。具体实现代码如下：
function getVendorPrefix() {
// 使用body是为了避免在还需要传入元素
var body = document.body || document.documentElement,
style = body.style,
vendor = ['webkit', 'khtml', 'moz', 'ms', 'o'],
i = 0;
while (i < vendor.length) {
// 此处进行判断是否有对应的内核前缀
if (typeof style[vendor[i] + 'Transition'] === 'string') {
return vendor[i];
}
i++;
}
}
只需调用getVendorPrefix()函数即可获知浏览器的内核前缀。若返回undefined，则表明该浏览器不支持CSS3属性，即不存在对应的内核前缀。
在编码实践中，遵循“能用CSS实现则不使用JavaScript”的原则，因为CSS性能通常优于JS。在实际应用中，如制作简单的图片轮播，既可使用CSS3的transition，也可使用jQuery的animate或原生JS实现。鉴于CSS3性能更优，建议编写两套代码：对于支持CSS3的浏览器使用animation，不支持的则回退至计时器或animate方法。这种策略能显著提升用户体验。
以上内容基于jquery.slides.js插件的使用心得总结。若有更优方案，欢迎与笔者交流。