javascript - Detect support for background-size: cover - Stack Overflow

admin管理员组

文章数量:1314292

What is a save way to detect support for CSS3 background-size: cover, especially in IE < 9?

Following test returns a false positive in IE < 9, because it actually sets background-size to cover:

div.style.backgroundSize = 'cover';

The only true result I get when testing for:

if ('backgroundSize' in div.style)

But according to the site , IE 6/7/8 should return auto, only cover and contain are not supported.

Edit:

I would like to use my own solution, but I have checked the code used by Modernizr. It seems they use the same technique that gives me false positive results in IE < 9: Set backgroundSize = 'cover' and then check for style.backgroundSize == 'cover'.

See my JSFiddle.

What is a save way to detect support for CSS3 background-size: cover, especially in IE < 9?

Following test returns a false positive in IE < 9, because it actually sets background-size to cover:

div.style.backgroundSize = 'cover';

The only true result I get when testing for:

if ('backgroundSize' in div.style)

But according to the site http://www.standardista./css3/css3-background-properties/#bg11, IE 6/7/8 should return auto, only cover and contain are not supported.

Edit:

I would like to use my own solution, but I have checked the code used by Modernizr. It seems they use the same technique that gives me false positive results in IE < 9: Set backgroundSize = 'cover' and then check for style.backgroundSize == 'cover'.

See my JSFiddle.

• javascript
• jquery
• css

Share Improve this question Follow edited Sep 3, 2012 at 10:54 John B. asked Sep 3, 2012 at 8:45 John B.John B. 2,35955 gold badges2323 silver badges2222 bronze badges

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 6

If you use Modernizr you can download only the code necessary to perform this kind of task

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

then you can test with

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

If you are trying to detect low functioning browsers to avoid having a postage stamp image stuck in the middle of things, then one quick and dirty workaround is to

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

If it's undefined, then you know you have a low functioning browser and should probably go with your fallback approach. YMMV.

You need to check if BackgroundSize exists as a style property before you set it.

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;

Source: http://upshots/javascript/javascript-detect-support-for-background-size-cover

Before this you might also want to try detection with CSS.supports(). see MDN: https://developer.mozilla/en-US/docs/Web/API/CSS/supports

This is with javascript alone, no jquery just check the version of browser you delealing with

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

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

本文标签： javascriptDetect support for backgroundsize coverStack Overflow