jQuery: testare il supporto alle proprietà CSS3

Il supporto CSS3 nei browser è sempre qualcosa che va testato con attenzione. Alcuni browser possono non supportare una determinata proprietà CSS3, e per questo motivo occorre sapere con certezza qual'è l'effettivo supporto del browser di destinazione alla proprietà che vogliamo usare. jQuery ci viene in aiuto nel modo che vedremo.

Possiamo creare la seguente funzione globale per testare il supporto dei browser alle proprietà CSS3:

(function($) {


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

   	  
      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 ) {
            return true;
         }
      }
      return false;
   };

})(jQuery);

Esempio:

$(function() {

	if ( $.supports('textShadow') ) {
   		$('body').addClass('text-shadow');
   	}

});