CSS Feature Detection: CSS3 Shadow
(can be integrated inside jquery core function 'jQuery.support')
I'm working on a shadow feature detection.
The idea is simple: if the browser have CSS3 shadow support, we will use it. Otherwise we will create a shadow box manually.
It's working very well so far! But I can't detect this on Opera.
Any ideas how to fix this? Any suggestion to improve this code?
/**
* CSS Feature Detection: Shadow
* Tested on: Firefox 3.0.18 and 3.6, IE 6, 7, 8, Chrome 5, Opera 10.5, Safari 4.0.5
* On Opera we can't detect correctly. (todo)
*
* Author: Tiago Fischer (tiagofischer@gmail.com)
*/
function featureDetectionShadow() {
var flagDetection = false;
function shadowDetection($handle, css) {
try {
var shadow = $handle.css(css);
if (shadow != 'null' && shadow != '') {
var regTest = String(shadow.match(/AAAAAA/i));
if (regTest != '') {
flagDetection = true;
}
}
} catch(err) { };
}
var $testOne = $('<div></div>').css('-moz-box-shadow', '0px 0px 8px 5px #AAAAAA');
var $testTwo = $('<div></div>').css('-webkit-box-shadow', '0px 0px 15px #AAAAAA');
var $testTree = $('<div></div>').css('box-shadow', '0px 0px 8px 5px #AAAAAA');
shadowDetection($testOne, '-moz-box-shadow');
shadowDetection($testTwo, '-webkit-box-shadow');
shadowDetection($testTree, 'box-shadow');
return flagDetection;
}