modernizr

ile css geçiş desteğini tespit etme CSS geçişini ve jQuery eklentisini, desteklemeyen tarayıcılar için geri dönüş olarak kullanacağım. Css geçiş desteğini algılamak için modernizr kullanmak istiyorum. Bunun için tüm kitaplığı yüklemek çok fazla, sadece css geçişini saptamak için gereken kod kısmını almak istiyorum. modernizr'in download page'unda, beni şaşırtan pek çok seçenek ve ekstra var. Sorum şu: css geçişini etkin bir şekilde algılamak için hangi seçenekleri seçmeliyim? yokturmodernizr

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>

kaynak

2011-08-07 NL500

dinamik css3 geçiş desteği ile çalışmak istiyorsanız ve jQuery yedekleri daha sonra bu makaleyi kontrol edin (http://hankchizljaw.co.uk/tutorials/dynamically-use-css3-transitions-with-jquery-and-modernizr-snippet/05/06/2012/). – HankChizlJaw

CSS İşlemleri, ben CSS geçişleri aradığınız düşünüyorum. CSS3 sütununun altında.

kaynak

2011-08-07 10:13:07 ZippyV

Haklısınız. Benim hatam. Bu yüzden sadece CSS geçişlerini seçmem ve oluşturulan kodu sayfama dahil etmem gerekiyor mu? –

Evet, geçişler ihtiyacınız olan tek şeyse. – awesomesyntax

Sadece CSS geçişleri kutusunu işaretleyin. Sağ altta birkaç kutu otomatik olarak işaretlenir, her ikisi de çok hafif olduğu için "CSS Sınıfları Ekle" ve "HTML5 Shim/IEPP" bırakırım.

kaynak

2011-08-07 10:21:09

Modernizr kütüphanesinden ihtiyacınız olan kod. Sadece 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);

Örneğin aşağıdaki kod ile geri düşebilir ve CSS3 Geçişler desteklemeyen tarayıcılar için jQuery güç animasyonlar kadar hizmet:

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

kaynak

2011-12-05 18:41:03

cevap

İlgili konular