使用modernizr檢測css轉換支持

我將使用css轉換和一個jQuery插件作爲不支持它的瀏覽器的後備。我想用modernizr來檢測css轉換支持。爲了加載整個庫是矯枉過正的，我只想抓住我需要檢測css轉換的部分代碼。在modernizr的download page有很多選項和額外的東西讓我困惑。我的問題是我應該選擇哪些選項來有效檢測css轉換？使用modernizr檢測css轉換支持

enter image description here

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


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

來源

2011-08-07 NL500

和jQuery的後備，然後檢查這[文章]（http://hankchizljaw.co.uk/tutorials/dynamically-use-css3-transitions-with-jquery-and-modernizr-snippet/05/06/2012/）。 – HankChizlJaw

CSS的交易不存在，我認爲你正在尋找的CSS轉換。它位於CSS3列的底部。

來源

2011-08-07 10:13:07 ZippyV

你是對的。我的錯。所以我只需要選擇CSS轉換並將生成的代碼包含在我的頁面中？ –

是的，如果轉換是你唯一需要的。 – awesomesyntax

只需勾選CSS轉換框即可。它會自動勾選右下角的幾個框，我會離開「添加CSS類」和「HTML5 Shim/IEPP」，因爲它們都非常輕便，並且非常有用。

來源

2011-08-07 10:21:09

這是您需要從Modernizr庫中獲得的代碼。它只有1kb。

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

例如，你可以用下面的代碼回落和服務於jQuery的動力動畫不支持CSS3過渡的瀏覽器：如果你想使用CSS3過渡支援工作動態

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

來源

2011-12-05 18:41:03

使用modernizr檢測css轉換支持

回答

相關問題