使用Javascript检测CSS转换（并且不使用Modernizer）？

我如何检测浏览器是否支持使用Javascript（并且不使用Modernizer）的CSS转换？

可能是这样的。基本上，它只是查看CSS

transition

属性是否已定义：

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;
}

函数支持位置（）{
var b=document.body | | document.documentElement，
s=b.style，
p=‘过渡’；
if（typeof s[p]=='string'）{return true；}
//针对供应商特定产品的测试
var v=['Moz'、'webkit'、'webkit'、'Khtml'、'O'、'ms']；
p=p.charAt（0.toUpperCase（）+p.substr（1）；
对于（var i=0；i3）这样做的方式：
或：

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';

如果确实要使用正确的前缀，请使用以下命令：

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';

您还可以使用以下方法（一种单线函数）：

这里是我使用的方式：

    var style = document.documentElement.style;

    if (
        style.webkitTransition !== undefined ||
        style.MozTransition !== undefined ||
        style.OTransition !== undefined ||
        style.MsTransition !== undefined ||
        style.transition !== undefined
    )
    {
        // Support CSS3 transititon
    }

从2015年起，这一系列产品将完成交易（即10+、Chrome 1+、Safari 3.2+、FF 4+和Opera 12+）：-

我提交了一个对
Ms
=>
Ms
的更改，这就是IE公开其供应商前缀dom样式的方式。（它们很奇怪。）托比，你为什么要在sans-modernizer中这样做？@paul试图降低延迟和大小（大大降低），而modernizer对于我们需要的这种单一检测来说是相当大的。托比，modernizer有一个模块化的构建生成器，可以降低文件大小。你应该看看。现在这段代码无法检测到IE10中的转换支持。这就是改造轮子的情况。：/vcsjones，你能更新代码以使用
ms
inst吗
Ms的ead
？不知道元素中有“style”对象，好东西检查未定义的更好：
typeof（style.webkitTransition）！==“未定义”
只有在不处于严格模式时才更好，因为
未定义的
可能会被懒惰/淘气的人重新分配，
style.webkitTransition！==void（0）
对于非严格模式使用更好（更快）…但是我们都应该使用“使用严格”在我们的code.Using中，整个代码块仅超过2000字节。比此处发布的其他测试大，但几乎不足以困扰用户。（我更喜欢Modernizer，因为迟早每个网站都会增长，并且需要不止一个测试。）我永远不会理解人们提出询问者特别要求不要使用的东西的动机。
var transitionsSupported = ('transition' in document.documentElement.style) || ('WebkitTransition' in document.documentElement.style);