Deal with browser incompliance using jQuery

Without a doubt, being a serious web guy you want your new site to look perfect on web browsers. Yes, mission would be simple - or sound simple - if there wasn’t something called browser wars for such a long time without any glorious winner (yet). The stupid result is, we poor web designers and programmers are still hopelessly struggling to keep our sites look the same on Internet Explorer (DIE PIG, DIE!!!), Firefox, Opera, Safari, just to find out that the oh so cool banner suddenly disappears from that new boy Chrome. FYI (psst) that was when I decided to stick with web that I started to learn cursing and swearing.

I am so proud to say that I decided to stop supporting IE 6 to save myself some precious life years and keep my head from getting bald long ago. But still, those guys in Microsoft they have IE 7 and 8 to haunt us. And despite of the so-called W3C standards, each of the remaining major browsers renders the pages differently here and there - margins, paddings, form elements, and so on. To deal with them, we use “hacks”. Perhaps the most well known hack is one below, called “conditional comments”:

<!--[if IE]>
Stuffs for Internet Explorer all versions
<![endif]-->
<!--[if IE 5]>
Stuffs for Internet Explorer 5
<![endif]-->
<!--[if IE 5.0]>
Stuffs for Internet Explorer 5.0
<![endif]-->
<!--[if IE 5.5]>
Stuffs for Internet Explorer 5.5
<![endif]-->
<!--[if IE 6]>
Stuffs for Internet Explorer 6
<![endif]-->
<!--[if IE 7]>
Stuffs for Internet Explorer 7
<![endif]-->
<!--[if IE 8]>
Stuffs for Internet Explorer 8
<![endif]-->
<!--[if gte IE 5]>
Stuffs for Internet Explorer 5 and up
<![endif]-->
<!--[if lt IE 6]>
Stuffs for Internet Explorer lower than 6
<![endif]-->
<!--[if lte IE 5.5]>
Stuffs for Internet Explorer lower or equal to 5.5
<![endif]-->
<!--[if gt IE 6]>
Stuffs for Internet Explorer greater than 6
<![endif]-->

When this technique is great, it has two limitations. First, only IE is taken into account. When most of the time dealing with IE takes the majority, there are still cases when your sites looks different on Firefox, Safari, Opera etc. Second, the HTML code looks very ugly and unprofessional - just like we are humbly telling: sorry this is beyond my control… I must use a hack here… and here… sorry again…

Then today when looking for a better solution, I stumbled upon a much better method that overcomes all of our current problems - well, sort of. The idea behind it is using jQuery to detect the browser and its version, then add the corresponding class names into the <body> tag. For instance, if the visitor uses Internet Explorer 7, then “.browserIE” and “.browserIE7″ are added. Then, in our CSS we specify the styles for this browser:

#aPainInThe4ssElement
{
    /* generic styles for this pain */
}
.browserIE7 #aPainInThe4ssElement
{
    /* styles for this element on IE 7 */
}
.browserFirefox #aPainInThe4ssElement
{
    /* styles for this element on all Firefox browsers */
}
.browserSafari2 #aPainInThe4ssElement
{
    /* styles for this element on Safari 2 */
}

My hat off to Jon for this brilliant idea. Now dealing with different browsers is just a piece of cake!

Now the only thing I regret of is what took me so long to find out this solution.


  • Hello! This is really a good solution, but it remains a small problem, what would happen if we did not have javascript enabled? I think ultimately that ‘conditional comments’ is currently the most secure (though perhaps less professional and clean) to avoid many trouble. Are you agree with this?

  • Marco, I totally agree with you, this solution will helplessly fail if JavaScript is disabled. However, considering that far less than 1% of users disable JavaScript, I would prefer the solution over conditional comments - especially when they are for IE only.

  • Hello, you can do this with PHP..
    $_SERVER['HTTP_USER_AGENT'] can detect navigator.
    Then, you can generate classes with php, and be sure that anybody will have good presentation :)

  • Yes, we can totally do this with PHP. This jQuery stuff however, doesn’t need to care about server language ;)

  • Yes. You’re right. I think in terms of usability (more users, individuals or business that is), and I think you will agree with me that the first method ensures that. Certainly, thinking in terms of percentages, 1% is a negligible number of users, and then jQuery is definitely preferable, as well as being more professional and less redundant. Bye. ;-)

You can follow any responses to this entry through the RSS 2.0 feed.