I'm creating a layout in full css. However, some browser (such as IE6) do not support box-shadow (.. and -webkit-box-shadow or -moz-box-shadow). I would like to check if it's not supported and then add other styles.
How's this possible in jQuery?
Martti Laine
var check = document.createElement('div');
var shadow = !!(0 + check.style['MozBoxShadow']);
if(shadow)
alert('moz-box-shadow available');
That is the doing-it-yourself way. Other reliable way is the modernizr library, which does feature detection for you.
No jQuery needed at all here.
WebkitBoxShadow and boxShadow, but it's not much of a stretch to figure that out.
A neat function (pure JavaScript, no jQuery) to check which CSS features are supported by the browser is described in Quick Tip: Detect CSS3 Support in Browsers with JavaScript.
Function is as follows:
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;
};
})();
Usage is like this:
if (supports('boxShadow')) {
// Do whatever
}
It worked like a charm for me! :-)
