记录一下。

CSS:-moz- -o- -ms- -webkit-

JS:Moz O ms Webkit

e.g. 

MozAnimationName -moz-animation-name
OAnimationName -o-animation-name
msAnimationName -ms-animation-name
WebkitAnimationName -webkit-animation-name

Modernizr这个库的源码中看到他检查浏览器的前缀就是这么用的。

/**
 * 检查是否支持CSS3动画
 */
prototype.isSupportAnimation = function () {
    if (this._isSupportAnimation != null) {
        return this._isSupportAnimation;
    }
    var fn = function () {
        // 检查是否支持CSS3动画
        var cssProps = 'animation-name -webkit-animation-name -moz-animation-name -ms-animation-name -o-animation-name'.split(' '),
            jsProps = 'animationName WebkitAnimationName MozAnimationName msAnimationName OAnimationName'.split(' '),
            style = doc.createElement('div').style,
            i;
        // 1.先用原生的方法检查是否支持
        if ('CSS' in win && 'supports' in win.CSS) {
            for (i = 0; i < cssProps.length; i++) {
                if (win.CSS.supports(cssProps[i], 'a')) {
                    return true;
                }
            }
        }
        // 2.再手动检测
        for (i = 0; i < jsProps.length; i++) {
            if (style[jsProps[i]] !== undefined) {
                return true;
            }
        }
        return false;
    };
    return this._isSupportAnimation = fn();
};

 浏览器前缀检测css-vendor

posted on 2018-01-11 11:59  ystrdy  阅读(163)  评论(0编辑  收藏  举报