Browser Feature Detection

Often when dealing with different browsers, this is something I encounter recently (with jQuery):


var ie6 = $.browser.msie && $.browser.version == '6.0';
if(ie6){
	$('html,body').css({height:'100%',width:'100%'});
	target.css('position','absolute'); //IE6 has no 'fixed' position
	//....
}

This code is copied from a library which aims at create an overlay for modal box. From IE7 onwards, CSS style position ‘fixed’ is supported, but not in IE7’s quirks mode. So the above code would fail. The solution is let IE7 run at correct doctype. e.g.:


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

But the code is still fragile to the environment. In jQuery, you can use $.support to get a set of feature detect properties. So, the code can become:


if(!$.support.boxModel){
	$('html,body').css({height:'100%',width:'100%'});
	target.css('position','absolute'); 
	//....
}

But it is still based on the assumption that “no support on boxModel = no support on fixed position”, which is “politically incorrect”.

Browser Feature Detection

Similar

Same day