检测对使用 JavaScript 转换的支持

我想根据浏览器是否支持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是一种矫枉过正。下面的函数应该适用于任何功能。

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

Modernizr 将为您检测这一点。使用此链接可创建仅包含 CSS3 2D 和/或 3D 过渡的自定义下载版本。

运行后，您可以在 html 标记（CSS）上测试 csstransitions 类，或者在 JavaScript 中测试Modernizr.csstransitions是否true。

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

这是另一个测试代码。也许这是一个矫枉过正，但该函数尝试将 CSS 属性设置为 DOM 对象，然后从中读回。

从未在大量外来浏览器上测试过此代码，但它比仅检查 CSS 属性可用性更安全。啊，是的，它可以区分 2D 变换支持和 3D 变换支持！只需传递要测试的 CSS 属性值！

此代码的优点是它可以检测支持的供应商前缀（如果有）。可能的返回值：

false ，当功能不受支持时，或

{
    vendor: 'moz',
    cssStyle: '-moz-transition',
    jsStyle: 'MozTransition'
}

支持功能时

/**
 * Test for CSS3 feature support. Single-word properties only by now.
 * This function is not generic, but it works well for transition and transform at least
 */
testCSSSupport: function (feature, cssTestValue/* optional for transition and transform */) {
    var testDiv,
        featureCapital = feature.charAt(0).toUpperCase() + feature.substr(1),
        vendors = ['', 'webkit', 'moz', 'ms', 'o'],
        jsPrefixes = ['', 'Webkit', 'Moz', 'ms', 'O'],
        defaultTestValues = {
            transition: 'left 2s ease 1s',
            transform: 'rotateX(-180deg) translateZ(.5em) scale(0.5)'
           // This will test for 3D transform support
           // Use other values if you need to test for 2D support only
        },
        testFunctions = {
            transition: function (jsProperty, computed) {
                return computed[jsProperty + 'Delay'] === '1s' && computed[jsProperty + 'Duration'] === '2s' && computed[jsProperty + 'Property'] === 'left';
            },
            transform: function (jsProperty, computed) {
                return computed[jsProperty].substr(0, 9) === 'matrix3d(';
            }
        };
    /* test given vendor prefix */
    function isStyleSupported(feature, jsPrefixedProperty) {
        if (jsPrefixedProperty in testDiv.style) {
            var testVal = cssTestValue || defaultTestValues[feature],
                testFn = testFunctions[feature];
            if (!testVal) {
                return false;
            }       
            testDiv.style[jsPrefixedProperty] = testVal;
            var computed = window.getComputedStyle(testDiv);
            if (testFn) {
                return testFn(jsPrefixedProperty, computed);
            }
            else {
                return computed[jsPrefixedProperty] === testVal;
            }
        }
        return false;
    }
    //Assume browser without getComputedStyle is either IE8 or something even more poor
    if (!window.getComputedStyle) {
        return false;
    }
    //Create a div for tests and remove it afterwards
    if (!testDiv) {
        testDiv = document.createElement('div');
        document.body.appendChild(testDiv);
        setTimeout(function () {
            document.body.removeChild(testDiv);
            testDiv = null;
        }, 0);
    }
    var cssPrefixedProperty,
        jsPrefixedProperty;
    for (var i = 0; i < vendors.length; i++) {
        if (i === 0) {
            cssPrefixedProperty = feature;  //todo: this code now works for single-word features only!
            jsPrefixedProperty = feature;   //therefore box-sizing -> boxSizing won't work here
        }
        else {
            cssPrefixedProperty = '-' + vendors[i] + '-' + feature;
            jsPrefixedProperty = jsPrefixes[i] + featureCapital;
        }
        if (isStyleSupported(feature, jsPrefixedProperty)) {
            return {
                vendor: vendors[i],
                cssStyle: cssPrefixedProperty,
                jsStyle: jsPrefixedProperty
            };
        }
    }
    return false;
}

Github：https://github.com/easy-one/CSS3test

if (window.TransitionEvent){
}

使用 Modernizr 3.0 （alpha），您可以在本地生成自定义版本。这可能会解决上述"矫枉过正"的担忧——尽管我一开始并不完全清楚这个问题（但我假设它的大小）。新的 api 提供了一个"build"方法，你可以将包含要包含在构建中的测试的 json 传递给该方法。

我在我的 gulp 文件中使用了这样的东西，但不需要 gulp - 一个简单的节点脚本就可以了。

gulp.task('js:modernizr', function() {
    var modConfig = JSON.parse(fs.readFileSync('modernizr-config.json', {
            encoding: 'utf8'
        }));
    modernizr.build(modConfig, function(res) {
        fs.writeFileSync('modernizr.js', res);
        return true;
    });
});

"modernizr-config.json"文件的一个例子是

{
  "classPrefix": "",
  "options": [
    "addTest",
    "atRule",
    "domPrefixes",
    "hasEvent",
    "html5shiv",
    "html5printshiv",
    "load",
    "mq",
    "prefixed",
    "prefixes",
    "prefixedCSS",
    "setClasses",
    "testAllProps",
    "testProp",
    "testStyles"
  ],
  "feature-detects": [
    "css/transforms",
    "css/transforms3d",
    "css/transformstylepreserve3d",
    "css/transitions",
    "touchevents",
    "workers/webworkers",
    "history"
  ]
}

完整的配置文件包含在 Modernizr 软件包中。

使用这种方法，您可以通过软件包安装程序利用维护良好的 Modernizr 测试套件，并根据需要轻松添加/删除测试。测试更少，文件明显更小。

"setClasses"选项会将相关的测试类添加到您的 html 中，但您也可以利用 3.0 异步事件，如下所示：

Modernizr.on('csstransitions', function(bool) {
    if (bool === true) // do transition stuffs
}

相关内容

最新更新

热门标签：