Return to Snippet

Revision: 35828
at November 14, 2010 09:13 by Nettuts


Updated Code
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;
   };
})();

if ( supports('textShadow') ) {
   document.documentElement.className += ' textShadow';
}

Revision: 35827
at November 14, 2010 08:16 by Nettuts


Updated Code
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;
   }
})();

if ( supports('textShadow') ) {
   document.documentElement.className += ' textShadow';
}

Revision: 35826
at November 14, 2010 08:04 by Nettuts


Updated Code
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;
   }
})();

if ( supports('textShadow') ) {
   document.documentElement.className +=  'textShadow';
}

Revision: 35825
at November 14, 2010 08:04 by Nettuts


Updated Code
var supports = (function() {
   var div = document.createElement('div'),
      vendors, len;

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

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

      vendors = 'Khtml Ms O Moz Webkit'.split(' ');
      len = vendors.length;

      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;
   }
})();

if ( supports('textShadow') ) {
   document.documentElement.className +=  'textShadow';
}

Revision: 35824
at November 14, 2010 07:50 by Nettuts


Updated Code
var supports = (function() {
   var div = document.createElement('div'),
      vendors, len;

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

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

      vendors = 'Khtml Ms Webkit O Moz'.split(' ');
      len = vendors.length;

      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;
   }
})();

if ( supports('textShadow') ) {
   document.documentElement.className +=  'textShadow';
}

Revision: 35823
at November 14, 2010 07:08 by Nettuts


Updated Code
var supports = (function() {
   var div = document.createElement('div'),
      vendors, len;

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

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

      vendors = 'Ms Webkit O Moz'.split(' ');
      len = vendors.length;

      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;
   }
})();

if ( supports('textShadow') ) {
   document.documentElement.className +=  'textShadow';
}

Revision: 35822
at November 14, 2010 06:56 by Nettuts


Updated Code
function supports(prop) {
   var div = document.createElement('div'),
      vendors, len;

   if ( prop in div.style ) return true;

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

   vendors = 'Khtml Ms O Webkit Moz'.split(' ');
   len = vendors.length;

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

if ( supports('textShadow') ) {
   document.documentElement.className += ' textShadow';
}

/* Then in CSS
.textShadow h1 {
  text-shadow: 0 1px 0 black;
}
*/

Revision: 35821
at November 14, 2010 06:55 by Nettuts


Updated Code
function supports(prop) {
   var div = document.createElement('div'),
      vendors, len;

   if ( prop in div.style ) return true;

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

   vendors = 'Khtml Ms O Webkit Moz'.split(' ');
   len = vendors.length;

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

if ( supports('textShadow') ) {
   document.documentElement.className +=  'textShadow';
}

/* Then in CSS
.textShadow h1 {
  text-shadow: 0 1px 0 black;
}
*/

Revision: 35820
at November 14, 2010 06:54 by Nettuts


Updated Code
function supports(prop) {
   var div = document.createElement('div'),
      vendors, len;

   if ( prop in div.style ) return true;

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

   vendors = 'Ms Webkit O Moz'.split(' ');
   len = vendors.length;

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

if ( supports('textShadow') ) {
   document.documentElement.className +=  'textShadow';
}

/* Then in CSS
.textShadow h1 {
  text-shadow: 0 1px 0 black;
}
*/

Revision: 35819
at November 14, 2010 06:53 by Nettuts


Updated Code
function supports(prop) {
   var div = document.createElement('div'),
      vendors, len;

   if ( prop in div.style ) return true;

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

   vendors = 'Ms Webkit O Moz'.split(' ');
   len = vendors.length;

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

if ( supports('textShadow') ) {
   document.documentElement.className +=  'textShadow';
}

// Then in CSS
.textShadow h1 {
  text-shadow: 0 1px 0 black;
}

Revision: 35818
at November 14, 2010 06:35 by Nettuts


Updated Code
function supports(prop) {
   var div = document.createElement('div'),
      vendors, len;

   if ( prop in div.style ) return true;

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

   vendors = 'Ms Webkit O Moz'.split(' ');
   len = vendors.length;

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

if ( supports('textStroke') ) {
   alert('wahoo!');
}

Revision: 35817
at November 14, 2010 06:30 by Nettuts


Initial Code
function supports(prop) {
   var div = document.createElement('div'),
      vendors, len;

   if ( prop in div.style ) return true;

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

   vendors = 'Ms Webkit O Moz'.split(' ');
   len = vendors.length;

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

if ( supports('textStroke') ) {
   alert('wahoo!');
}

Initial URL


Initial Description
This function will test whether or not the browser supports a specified CSS3 property, like "border-radius." 

Note that, when passing the property, omit the dash. So, instead of "border-radius," pass "borderRadius" (or "BorderRadius").

Initial Title
Test CSS3 Support with JS

Initial Tags


Initial Language
JavaScript