浏览器前缀

最新推荐文章于 2024-09-04 10:51:19 发布

weixin_30615767

最新推荐文章于 2024-09-04 10:51:19 发布

阅读量65

点赞数

原文链接：http://www.cnblogs.com/ystrdy/p/8267682.html

版权

记录一下。

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

转载于:https://www.cnblogs.com/ystrdy/p/8267682.html