JavaScriptによるトランジションのサポートを検出しました

Question

ブラウザが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') 
    } 
} 

Answer 1

Modernizrがこれを検出します。 this linkを使用して、CSS3の2Dおよび/または3Dトランジションのみを含むカスタムダウンロードビルドを作成します。それが実行されます一度

は、あなたがModernizr.csstransitionsはtrueいずれかhtmlタグ（CSS）のcsstransitionsクラスのテスト、またはJavaScriptで、テストであることができるかどうか。

その他のドキュメントは：http://modernizr.com/docs/#csstransitions

Answer 2

私も含めModernizrはやり過ぎだと思います。下記の機能は、どの機能でも機能するはずです。ここhttps://developer.mozilla.org/en-US/docs/CSS/Tutorials/Using_CSS_animations/Detecting_CSS_animation_support

Answer 3

触発

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"); 

は、別のテストコードです。たぶんそれは過剰ですが、関数はCSSプロパティをDOMオブジェクトに設定してからそれを読み取ろうとします。

大量のエキゾチックブラウザでこのコードをテストしたことはありませんが、CSSプロパティの可用性をチェックするよりも安全です。ああ、はい、それは、3Dトランスフォームのサポートから2Dトランスフォームのサポートを区別することができます！テストしたい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のサポート：あなたは、Modernizr 3.0（アルファ）でhttps://github.com/easy-one/CSS3test

Answer 4

if (window.TransitionEvent){ 

} 

Answer 5

をカスタムビルドをローカルで生成できます。これは前述の「過剰な」懸念を解決するかもしれませんが、私は最初の懸念については完全にはっきりしていませんが（しかし、私はそれがサイズだと仮定しています）。新しいAPIはビルドに含めるテストを含む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 
}