js判断浏览器的内核和是否支持某些CSS3属性

一、判断浏览器内核

在前端开发过程中，有时我们需要判断浏览器的内核前缀，对不同的浏览器做出不同的处理，因此我们可以这么做。
　　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;console.log(style);        while (i < vendor.length) {            // 此处进行判断是否有对应的内核前缀            if (typeof style[vendor[i] + 'Transition'] === 'string') {                return vendor[i];            }            i++;        }    }    console.log(getVendorPrefix());

二、JS判断浏览器是否支持某一个CSS3属性的方法

1、引子
css3的出现让浏览器的表现更加的丰富多彩，表现冲击最大的就是动画了，在日常书写动画的时候，很有必要去事先判断浏览器是否支持，尤其是在写CSS3动画库的时候。比如transition的animation-play-state，就只有部分浏览器支持。
2、检测方法
下面的方法可以使用脚本判断浏览器是否支持某一个CSS3属性：

 function supportCss3(style) {        var prefix = ['webkit', 'Moz', 'ms', 'o'],            i,            humpString = [],            htmlStyle = document.documentElement.style,            _toHumb = function (string) {                return string.replace(/-(\w)/g, function ($0, $1) {                    return $1.toUpperCase();                });            };        for (i in prefix)            humpString.push(_toHumb(prefix[i] + '-' + style));        humpString.push(_toHumb(style));        for (i in humpString)            if (humpString[i] in htmlStyle) return true;        return false;    }

3、使用方法

alert(supportCss3('animation-play-state'));

作者：datura_lj
链接：http://www.jianshu.com/p/38b71721c0a8
來源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。