Phát hiện hỗ trợ cho kích thước nền: che

Question

Cách tiết kiệm để phát hiện hỗ trợ cho CSS3 là kích thước nền: bìa, đặc biệt là trong IE < 9?

kiểm tra sau trả về một dương tính giả trong IE < 9, bởi vì nó thực sự đặt background-kích thước-bìa:

div.style.backgroundSize = 'cover'; 

duy nhất kết quả đúng tôi nhận được khi kiểm tra cho:

if ('backgroundSize' in div.style) 

Nhưng theo trang web http://www.standardista.com/css3/css3-background-properties/#bg11, IE 6/7/8 phải trả lại tự động, chỉ bìa và chứa không được hỗ trợ.

Edit:

Tôi muốn sử dụng giải pháp của riêng tôi, nhưng tôi đã kiểm tra các code used by Modernizr. Có vẻ như họ sử dụng cùng một kỹ thuật cho tôi kết quả dương tính giả trong IE < 9: Đặt backgroundSize = 'cover' và sau đó kiểm tra style.backgroundSize == 'cover'.

Xem JSFiddle của tôi.

Answer 1

Nếu bạn sử dụng Modernizr bạn có thể tải chỉ mã cần thiết để thực hiện loại nhiệm vụ

http://modernizr.com/download/#-backgroundsize-testprop-testallprops-domprefixes

sau đó bạn có thể thử nghiệm với

if (Modernizr.backgroundsize) { 
    /* backgroundSize supported */ 
} 

Answer 2

Nếu bạn đang cố gắng để phát hiện hoạt động thấp trình duyệt để tránh có hình ảnh tem bưu chính bị kẹt ở giữa sự vật, sau đó một cách giải quyết nhanh chóng và dơ bẩn là

var rules = document.styleSheets[0].cssRules; 

Nếu không xác định, bạn biết bạn có trình duyệt hoạt động kém và có lẽ nên đi theo phương pháp dự phòng của bạn. YMMV.

Answer 3

Đây là với javascript một mình, không có jquery chỉ cần kiểm tra các phiên bản của trình duyệt bạn delealing với

//check if Is bad IE. 
var noBGSizeSupport = window.attachEvent && !window.addEventListener 

if(noBGSizeSupport){ 
    //does not support BG size property 
} else { 
    // supports background size property 
} 

Answer 4

Bạn cần phải kiểm tra xem BackgroundSize tồn tại như một tài sản phong cách trước khi bạn đặt nó.

var supported = ('backgroundSize' in document.documentElement.style); 
if(supported){ 
    var temp = document.createElement('div'); 
    temp.style.backgroundSize = 'cover'; 
    supported = temp.style.backgroundSize == 'cover'; 
}; 
return supported; 

Nguồn: http://upshots.org/javascript/javascript-detect-support-for-background-size-cover

Trước đó bạn cũng có thể muốn thử phát hiện với CSS.supports(). xem MDN: https://developer.mozilla.org/en-US/docs/Web/API/CSS/supports