Saturday, March 19, 2011

IE 9 detection with jQuery

For quite a while I've been using jQuery and feature detection to add styling elements to Internet Explorer 8 and earlier on load, especially for rounded corners. The particular feature I settled on for this was htmlserialize

$(document).ready(function()
{
//IE rounded corners
if(!$.support.htmlserialize) // IE feature detection
{
struct = '<span class="ie-tl"></span><span class="ie-tr"></span><span class="ie-br"></span><span class="ie-bl"></span>';
$('div.corners').append(struct);

//compensate for irregular first-child/last-child support
$('li:first-child').addClass('ie-first');$('li:last-child').addClass('ie-last');
} //end IE detection
}); //end ready

Internet Explorer 9 handles CSS3 making this generally unnecessary for visitors using the browser. More importantly IE9 has it's own new set of rendering differences compared to earlier versions which need to be accounted for as long as IE8 (and IE7) are still out there.
The feature I've found works to target IE9 is opacity, most generally I use it to exclude the browser, as in

if(!$.support.htmlSerialize && !$.support.opacity)
{
// IE6/7/8 code
}

0 comments: