Which browser am I using? No comment!

Jake Howlett, 7 Febraury 2002

Category: Miscellaneous; Keywords: browser version sniffers comment

I've been lucky for the past couple of years in that I have only really ever developed for intranets where the browser was standardised on both type and version. More often than not this is Internet Explorer 5. This has meant that I have never had to bother worrying too much about tailoring any content for any particular visitor's choice of browser.

When it comes to this site, I've done two things: 1 - Pretty much stopped caring about Netscape, 2 - Shied away from using anything that fancy that it is in any way browser-dependent. This means that I've never really had to bother with browser-sniffing on here either.

What would I do if one day I had to? Hmm, not sure. There are so many different scripts I've seen that do the same job. It always makes me wonder why there are so many different versions if all the others work...

A fresh approach:

Now, firstly, let's assume that the most common cause for the need to sniff a browser is in order to hide things from browsers other than IE. Let's face it, most of the functionality that we have in our hands is restricted to IE. In particular versions 5 or 5.5 onward. Since this the releases of which the possibilities for creating applications, on the web, that mimic their powerful client cousins is forever expanding.

Note: Before you all start thinking I'm off on one of my "this only works in IE" rants, just give me a minute. This applies to ALL browsers and is VERY useful. Trust me...

As an example I'm going to use a nice little feature that you can only use in IE5+. It's the bit of JavaScript that lets you bookmark a page. You'd never actually catch me adding this or anything else that does nothing more than reproduce inherent browser functionality, but it's a good example. The code for this method is:



window.external.AddFavorite (window.location,document.title);

I've actually seen reputable sites that display this on all pages, not bothering to care whether it works or not. Tut, tut.

The old approach:

A common method is to use a JavaScript function to "sniff" the browser details. This usually consists of something similar to the code below:



if ((navigator.appName == "Microsoft Internet Explorer") && (parseInt(navigator.appVersion) >= 5)) { ....

This line of code tells us whether or not the browser is IE5+. Using this we could add the following HTML to a page:



<script>

if ((navigator.appName == "Microsoft Internet Explorer") && (parseInt(navigator.appVersion) >= 5)) document.write("<a href='window.external.AddFavorite (window.location,document.title);'>Bookmark this page</a>")

</script>

An alternative is to do it server-side with an @Formula, similar to the following, in a "Computed Value" text area.



@If(@BrowserInfo("BrowserType")="Microsoft" & @BrowserInfo("Version") >= 5;

"<a href=\"window.external.AddFavorite (window.location,document.title);\">Bookmark this page</a>";

"")

Both of the above require certain amounts of coding and then requires the resources of the server or browser to compute the result. I'd try my hardest to never end up using any of the above. Indeed they may not even work as I typed them from the top of my head ;-)

The new approach:

What I would like to use if I had to would be something a little more refined and a lot simpler. In comes the Conditional Comment. I've seen these used on the Miscrosoft website and was intrigued to the point of finding out what they are all about. Now I hope we can all benefit.

Let's start by looking at a normal comment:



<!-- Browsers Will Not Display This -->

And another:



<!-- <a href="foo.html">This link will NOT appear</a> -->

Now let's look at a Conditional Comment:



<!--[if gte IE 5]>

<a href="foo.html">This link will NOT appear in anything other than IE5+</a>

<![endif]-->

Looks a little different doesn't it. The extra parts here are used by IE5+ to determine what to do with the internal content of the comment tags. In this case it checks whether the version of IE is greater than or equal to 5. If so, it will render the <a> tag that's contained. Otherwise it remains hidden.

The beauty of these types of comment is that, to all other types of browser, this is still just a plain old comment and it will ignore everything inside it.

The above is known as a "downlevel-hidden" Conditional Comment, meaning that it will be hidden to other browsers. There is another type known as "downlevel-revealed" where the content is always displayed to other browsers yet the display in IE5+ is computed. Here's one to look at:



<![if IE !6]>

<a href="foo.html">This link will NOT appear</a>

<![endif]>

Notice how the "--"s have been removed, thus making the comment tags illegal. This means that other browsers will ignore these "comment" tags and instead just display the content between them. However, IE5+ still recognises it as a Conditional Comment and computes what to do with the content. In the above case it displays to all versions of IE except version 6.

An example:

Here's an example of a Conditional Comment:



<!--[if gte IE 5]>

<span style="color:red">You are using a Internet Explorer and a version greater than 5.</span>

<![endif]-->

Here's how it renders in your browser:

If there is no red text above this line then you aren't using IE5+. Tut, tut. If you don't believe the code is there do a view-source.

Summary:

Hopefully the above makes sense. This is one of those things you will either get or you won't. Not sure I've done it full justice really. The main benefit is ease of use and reduction of code.

Other operators that you can use are lt, lte, gt and gte. The Microsoft site says the syntax is [if IE gt 5] but I've found I only get it to work with [if gt IE 5] using my version of IE6. Not sure where the not operator (!) should go. Trial and error...