Détecter le support pour la taille de fond: couverture

Qu'est-ce qu'un mode de sauvegarde pour détecter le support de CSS3 background-size: cover , en particulier dans IE <9?

Le test suivant renvoie un faux positif dans IE <9, car il définit réellement la taille de fond pour couvrir :

div.style.backgroundSize = 'cover'; 

Le seul résultat réel que j'obtiens lors du test:

 if ('backgroundSize' in div.style) 

Mais selon le site http://www.standardista.com/css3/css3-background-properties/#bg11 , IE 6/7/8 devrait retourner automatiquement , seul le recouvrement et le contenu ne sont pas pris en charge.

Modifier:

J'aimerais utiliser ma propre solution, mais j'ai vérifié le code utilisé par Modernizr . Il semble qu'ils utilisent la même technique qui me donne des résultats faussement positifs dans IE <9: Set backgroundSize = 'cover' , puis vérifiez pour style.backgroundSize == 'cover' .

Voir mon JSFiddle .

Si vous utilisez Modernizr vous ne pouvez télécharger que le code nécessaire pour effectuer ce type de tâche

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

Alors vous pouvez tester avec

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

Si vous essayez de détecter les navigateurs à faible fonctionnement pour éviter d'avoir une image de timbre-poste collé au milieu des choses, une solution de contournement rapide et sale est de

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

Si elle est indéfinie, vous savez que vous avez un navigateur fonctionnant peu et devrait probablement suivre votre approche de recharge. YMMV.

Vous devez vérifier si BackgroundSize existe en tant que propriété de style avant de la configurer.

 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.org/javascript/javascript-detect-support-for-background-size-cover

Avant cela, vous pouvez également essayer la détection avec CSS.supports (). Voir MDN: https://developer.mozilla.org/en-US/docs/Web/API/CSS/supports

C'est avec javascript seul, pas jquery, il suffit de vérifier la version du navigateur que vous supprimez avec

 //check if Is bad IE. var noBGSizeSupport = window.attachEvent && !window.addEventListener if(noBGSizeSupport){ //does not support BG size property } else { // supports background size property }