Comment vérifier si css box-shadow est supporté (jQuery)?

Question

Je crée une mise en page en full css. Cependant, certains navigateurs (comme IE6) ne supportent pas box-shadow (.. et -webkit-box-shadow ou -moz-box-shadow). Je voudrais vérifier si ce n'est pas supporté et ensuite ajouter d'autres styles.

Comment est-ce possible dans jQuery?

Lainé Martti

Answer 1

var check = document.createElement('div'); 

var shadow = !!(0 + check.style['MozBoxShadow']); 
if(shadow) 
    alert('moz-box-shadow available'); 

C'est la façon faire-it-yourself. Autre moyen fiable est la bibliothèque modernizr, qui fait la détection de fonctionnalités pour vous.

http://www.modernizr.com/

Pas jQuery nécessaire du tout ici.

Answer 2

Une fonction propre (JavaScript pur, pas jQuery) pour vérifier quelles fonctionnalités CSS sont supportées par le navigateur est décrite dans Quick Tip: Detect CSS3 Support in Browsers with JavaScript.

fonction est la suivante:

var supports = (function() { 
    var div = document.createElement('div'), 
     vendors = 'Khtml Ms O Moz Webkit'.split(' '), 
     len = vendors.length; 

    return function(prop) { 
     if (prop in div.style) { 
      return true; 
     } 

     prop = prop.replace(/^[a-z]/, function(val) { 
     return val.toUpperCase(); 
     }); 

     while (len--) { 
     if (vendors[len] + prop in div.style) { 
      // browser supports box-shadow. Do what you need. 
      // Or use a bang (!) to test if the browser doesn't. 
      return true; 
     } 
     } 

     return false; 
    }; 
})(); 

L'utilisation est comme ceci:

if (supports('boxShadow')) { 
    // Do whatever 
} 

Il a fonctionné comme un charme pour moi! :-)