phát hiện hỗ trợ chuyển tiếp css với modernizr

Question

Tôi sẽ sử dụng chuyển tiếp css và plugin jquery làm dự phòng cho các trình duyệt không hỗ trợ nó. Tôi muốn sử dụng modernizr để phát hiện hỗ trợ chuyển tiếp css. It's overkill để tải toàn bộ thư viện cho điều này, tôi chỉ muốn lấy phần mã tôi cần phải phát hiện chuyển tiếp css. trong download page của modernizr có rất nhiều tùy chọn và tính năng bổ sung gây nhầm lẫn cho tôi. Câu hỏi của tôi là lựa chọn những gì tôi nên chọn để phát hiện hiệu quả chuyển tiếp 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

Giao dịch CSS không tồn tại, tôi nghĩ rằng bạn đang tìm kiếm ứng chuyển tiếp CSS. Nó ở dưới cùng của cột CSS3.

Answer 2

Chỉ cần đánh dấu vào hộp chuyển đổi CSS. Nó sẽ tự động đánh dấu vào một vài ô ở phía dưới bên phải, tôi sẽ để lại "Add CSS Classes" và "HTML5 Shim/IEPP", vì cả hai đều rất nhẹ và rất hữu ích.

Answer 3

Đây là mã bạn cần từ thư viện Modernizr. Nó chỉ có 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); 

Ví dụ, bạn có thể rơi trở lại với đoạn mã sau và phục vụ lên jQuery hình ảnh động được hỗ trợ cho trình duyệt mà không hỗ trợ CSS3 Transitions:

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