Browser detection

Browser detection is evil, but sometimes a necessary evil. In a perfect world, we would create a webpage that looks the same in every browser without browser detection or any other troubles; This is exactly what web standards aims to achieve. Unfortunately IE 6, 7 and 8 doesn’t adhere to the standards like they should. This forces us to use browser specific stylesheets.

What’s wrong with browser detection?

An example of an immediate problem would be: websites that contain an IE specific stylesheet (I have a few of these out there).
IE 9 is going to be released next year and it seems like it is going to be a good browser. Once people start using it, webpages that contain IE specific stylesheets will force IE 9 to adopt the stylesheet too, which will probably throw elements around. An important fix for this would be to change “if IE” statements, to “if less than or equal to IE 8″

<!--[if IE]>
<link rel="stylesheet" type="text/css" href="css/ie.css" media="screen" />
<![endif]-->

to:


<!--[if lte IE 8]>
<link rel="stylesheet" type="text/css" href="css/ie.css" media="screen" />
<![endif]-->

Fortunately it is relatively simple to correct that problem, however it is creating unnecessary work for everyone. Also, there are (I have no idea how many) 1000’s of cases where people have used “greater than” browser detection, such as [if gt IE 6] (If Greater Than IE 6). This will cause lots of problems in the future.

IE doesn’t release updates as much as other browsers do. Imagine adding Opera only code (css or javascript) to your webpage, only to have to deal with ANOTHER fix very soon afterwards because Opera has updated their browser.

But it’s not working in every browser

If something isn’t working cross browser, there are a few steps I take to make sure it’s not my fault. (Computers only do what we tell them to do)

Step 1 – Validate your xHTML. Download this Webdeveloper firefox plugin, it gives you lots of options including local validation. Incorrect HTML markup is a big cause of cross browser problems. As soon as you are having a problem, check this immediately.

Step 2 – Validate your CSS (CSS3 doesn’t validate at the moment, but validate to make sure you haven’t made a spelling mistake or omitted something)

Step 3 – Look at what you are trying to do and think about whether it is the most efficient way of doing it. I have had a problem with a navigation menu in firefox 3.5. It worked in every other browser so I thought about browser detection for a moment, but I decided against it. I ended up recreating the navigation menu bar in a more simple manner which fixed the problem (I still don’t know what the actual problem was). Always keep your HTML markup as simple as possible.

Can’t avoid it?

Obviously there are times where browser detection is the way. I created a yoyo using CSS3 and jQuery in my previous article. In the demo I detected for Safari and added an extra line of text with the following jQuery code:

if($.browser.safari){
	$("#content p").append(" And see what happens when you hover over the link on the yoyo.");
}

I did this because webkit based browsers (Safari and Chrome) use certain CSS properties that don’t work on other browsers yet.
Even though I said ‘if the browser is safari’, it still works on Chrome as well. This wasn’t a problem for me in this specific example, but it’s an example of how browser detection can be faulty and why it should be avoided.

Detect for different versions of IE

Target IE 8 and lower (The only time you should target every IE version, or use gt or gte is if you are sure you want to affect future versions with the code)

<!--[if lte IE 8]>
	<link rel="stylesheet" type="text/css" href="css/ie.css" media="screen" />
<![endif]-->

Target everything except IE (I have never used this)

<!--[if !IE]><!-->
	<link rel="stylesheet" type="text/css" href="not-ie.css" />
<!--<![endif]-->

Target IE 6 only

<!--[if IE 6]>
	<link rel="stylesheet" type="text/css" href="ie-6.css" />
<![endif]-->

You can target any version of IE by adjusting the number after "IE ".
'lte' is an abbreviation for 'Less Than and Equal to'.
You can also use 'lt' which means 'Less Than'.

Detect for Opera using jQuery

Use the following jQuery code to add a class of "opera" to your body.

$(document).ready(function(){
    if($.browser.opera){
        $('body').addClass('opera');
    }
});

You can target Opera only by adding "opera.body" to the beginning of your CSS selectors. For example:

#header { width: 960px; height: 350px; }
body.opera #header { border: 3px solid red; }

In Opera, the #header element will have a width of 960px, a height of 350px and a border of 3px solid red. Other browsers will not have a red 3px border.

Conclusion

It is fairly easy to avoid browser problems (Outside of IE) if you want to.
Browser detection is evil and should be avoided at all costs, otherwise it will probably come back to haunt you.

Any questions or comments?