检测对使用JavaScript进行转换的支持

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (10)

我想根据浏览器是否支持CSS3转换来提供不同的JavaScript文件。有没有更好的方法来检测转换支持比我下面的代码?

window.onload = function () {
    var b = document.body.style;
    if(b.MozTransition=='' || b.WebkitTransition=='' || b.OTransition=='' || b.transition=='') {
        alert('supported');
    } else {
        alert('NOT supported')
    }
}
提问于
用户回答回答于

Modernizr会为您检测到这一点。使用此链接 创建只包含CSS3 2D和/或3D转换的自定义下载版本。

一旦它的运行,你可以在这两项测试中csstransitions的类html标签(CSS),或在JavaScript中测试,如果Modernizr.csstransitionstrue

更多文档:http : //modernizr.com/docs/#csstransitions

用户回答回答于

我也认为包括Modernizr是一个矫枉过正的问题。以下功能适用于任何功能。

function detectCSSFeature(featurename){
    var feature = false,
    domPrefixes = 'Webkit Moz ms O'.split(' '),
    elm = document.createElement('div'),
    featurenameCapital = null;

    featurename = featurename.toLowerCase();

    if( elm.style[featurename] !== undefined ) { feature = true; } 

    if( feature === false ) {
        featurenameCapital = featurename.charAt(0).toUpperCase() + featurename.substr(1);
        for( var i = 0; i < domPrefixes.length; i++ ) {
            if( elm.style[domPrefixes[i] + featurenameCapital ] !== undefined ) {
              feature = true;
              break;
            }
        }
    }
    return feature; 
}

var hasCssTransitionSupport = detectCSSFeature("transition");

https://developer.mozilla.org/en-US/docs/CSS/Tutorials/Using_CSS_animations/Detecting_CSS_animation_support

扫码关注云+社区