modernizrとのCSS移行サポートを検出しました

Question

私はCSSトランジションとjqueryプラグインをサポートしていないブラウザのフォールバックとして使用します。私は、CSSの移行サポートを検出するためにmodernizrを使用したいと思います。このためにライブラリ全体を読み込むのは残念です。私は、CSSのトランジションを検出するために必要なコードの部分を取得したいだけです。モダニズムのdownload pageには、私を混乱させるたくさんのオプションやエキストラがあります。私の質問は、効率的にCSSを検出するためにどのようなオプションを選択すべきですか？

<script type="text/javascript"> 
// modernizr 
</script> 


<script type="text/javascript"> 
    if(!Modernizr.csstransitions) { 
    // Use jquery if CSS transitions are not supported 
    } 
</script> 

Answer 1

CSS取引が存在しない、私はあなたがCSSトランジションを探していると思います。それはCSS3の列の一番下にあります。

Answer 2

CSSトランジションボックスにチェックを入れてください。それは自動的に右下のいくつかのボックスにチェックを入れ、 "Add CSS Classes"と "HTML5 Shim/IEPP"を残しておきます。両方とも非常に軽量で便利です。

Answer 3

ここには、Modernizrライブラリから必要なコードがあります。わずか1kbです。次のコードでフォールバックし、CSS3トランジションをサポートしていないブラウザにjQueryのパワードアニメーションを果たすことができる。例えば

;window.Modernizr=function(a,b,c){function z(a,b){var c=a.charAt(0).toUpperCase()+a.substr(1),d=(a+" "+m.join(c+" ")+c).split(" ");return y(d,b)}function y(a,b){for(var d in a)if(j[a[d]]!==c)return b=="pfx"?a[d]:!0;return!1}function x(a,b){return!!~(""+a).indexOf(b)}function w(a,b){return typeof a===b}function v(a,b){return u(prefixes.join(a+";")+(b||""))}function u(a){j.cssText=a}var d="2.0.6",e={},f=b.documentElement,g=b.head||b.getElementsByTagName("head")[0],h="modernizr",i=b.createElement(h),j=i.style,k,l=Object.prototype.toString,m="Webkit Moz O ms Khtml".split(" "),n={},o={},p={},q=[],r,s={}.hasOwnProperty,t;!w(s,c)&&!w(s.call,c)?t=function(a,b){return s.call(a,b)}:t=function(a,b){return b in a&&w(a.constructor.prototype[b],c)},n.csstransitions=function(){return z("transitionProperty")};for(var A in n)t(n,A)&&(r=A.toLowerCase(),e[r]=n[A](),q.push((e[r]?"":"no-")+r));u(""),i=k=null,e._version=d,e._domPrefixes=m,e.testProp=function(a){return y([a])},e.testAllProps=z;return e}(this,this.document); 

：

if (!Modernizr.csstransitions) { 
    $(document).ready(function(){ 
    $(".test").hover(function() { 
     $(this).stop().animate({ color: "#F00" },700) 
    }, function() { 
     $(this).stop().animate({ color: "#AAA" },700)} 
     ); 
    }); 
}