使用Javascript(并且没有modernizr)检测CSS转换?

IT技术 javascript css cross-browser css-transitions
2021-03-13 23:06:33

我如何检测浏览器是否支持使用 Javascript(而不使用 Modernizr)的 CSS 转换?

5个回答

也许是这样的。基本上它只是想看看是否transition已经定义了 CSS属性:

function supportsTransitions() {
    var b = document.body || document.documentElement,
        s = b.style,
        p = 'transition';

    if (typeof s[p] == 'string') { return true; }

    // Tests for vendor specific prop
    var v = ['Moz', 'webkit', 'Webkit', 'Khtml', 'O', 'ms'];
    p = p.charAt(0).toUpperCase() + p.substr(1);

    for (var i=0; i<v.length; i++) {
        if (typeof s[v[i] + p] == 'string') { return true; }
    }

    return false;
}

改编自这个要点所有的信用都在那里。

不知道元素中有“样式”对象这样的东西,好东西
2021-04-26 23:06:33
我提交了对Ms=>的更改ms,这就是 IE 公开其供应商前缀 dom 样式的方式。(他们很奇怪。)托比,你为什么要尝试这种没有现代风格的东西?
2021-04-28 23:06:33
@paul 试图减少延迟和大小(向下),并且对于我们需要的这种单一检测,modernizer 非常大。
2021-05-01 23:06:33
@vcsjones,你能更新代码来ms代替Ms吗?
2021-05-15 23:06:33
托比,modernizr 有一个module化构建生成器,可以减小文件大小。你应该看看。现在这段代码将无法检测到 IE10 中的转换支持。重新发明轮子就是这种情况。:/
2021-05-18 23:06:33

3种方法:

var supportsTransitions  = (function() {
    var s = document.createElement('p').style, // 's' for style. better to create an element if body yet to exist
        v = ['ms','O','Moz','Webkit']; // 'v' for vendor

    if( s['transition'] == '' ) return true; // check first for prefeixed-free support
    while( v.length ) // now go over the list of vendor prefixes and check support until one is found
        if( v.pop() + 'Transition' in s )
            return true;
    return false;
})();

console.log(supportsTransitions) // 'true' on modern browsers

或者:

var s = document.createElement('p').style,
        supportsTransitions = 'transition' in s ||
                              'WebkitTransition' in s ||
                              'MozTransition' in s ||
                              'msTransition' in s ||
                              'OTransition' in s;

console.log(supportsTransitions);  // 'true' on modren browsers

如果您确实想使用正确的前缀,请使用以下命令:

function getPrefixed(prop){
    var i, s = document.createElement('p').style, v = ['ms','O','Moz','Webkit'];
    if( s[prop] == '' ) return prop;
    prop = prop.charAt(0).toUpperCase() + prop.slice(1);
    for( i = v.length; i--; )
        if( s[v[i] + prop] == '' )
            return (v[i] + prop);
}

// get the correct vendor prefixed property
transition = getPrefixed('transition');
// usage example
elment.style[transition] = '1s';

截至 2015 年,这款单线应该可以完成交易(IE 10+、Chrome 1+、Safari 3.2+、FF 4+ 和 Opera 12+):-

var transitionsSupported = ('transition' in document.documentElement.style) || ('WebkitTransition' in document.documentElement.style);

这里是我使用的方式:

    var style = document.documentElement.style;

    if (
        style.webkitTransition !== undefined ||
        style.MozTransition !== undefined ||
        style.OTransition !== undefined ||
        style.MsTransition !== undefined ||
        style.transition !== undefined
    )
    {
        // Support CSS3 transititon
    }
它只有在不处于严格模式时更好,因为undefined可以由懒惰/恶作剧的人重新分配,style.webkitTransition !== void(0)对于非严格模式使用更好(更快)......但是我们都应该在我们的代码中使用“use strict”。
2021-04-28 23:06:33
检查未定义更好: typeof (style.webkitTransition) !== "undefined"
2021-05-18 23:06:33

您也可以使用以下方法(一种单行功能):

var features;
(function(s, features) {
    features.transitions = 'transition' in s || 'webkitTransition' in s || 'MozTransition' in s || 'msTransition' in s || 'OTransition' in s;
})(document.createElement('div').style, features || (features = {}));

console.log(features.transitions);