jQuery IE Detection

Ask any web developer and 99.99% of them will say they hate IE. IE is always behind on adapting new features. Whether it’s new CSS or new HTML tags, it’s always been a pain in the butt. 

For many, many years, there was a way to add an IE only CSS style sheet. You could even target the version. Since the launch of IE 10 (I think it was 10–I could be off), they stopped allowing this. So how do you target IE layout issues?

The answer took some digging. While I saw many different ways, the best way for me was using jQuery. Thanks to a couple of StackOverflow answers, I was able to find to a script that runs a check based on the users’ userAgent. If it is IE, it will add a CSS class to the body tag. That makes it easy to target. Here’s the script:

$(function($){ 
 //This helps target IE and add appropriate classes. 
 if(/msie|trident|edge/g.test(navigator.userAgent.toLowerCase())) { 
    $('body').addClass('ie-detect');
    var version = navigator.userAgent.match( /(MSIE |Trident.*rv[ :])([0-9]+)/ ); 
    if(version != null) { 
        $('body').addClass('ie-ver'+version[2]);
    } 
 } 
}

So with this check, it will add two classes. The first one is a overall .ie-detect followed by the .ie-ver and the version. This does have the power to detect Edge as well, but honestly, I haven’t had any issues with Edge. 

Anywho, that’s my tid bit for the day!