Which browser am I using? No 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...
Really interesting
A really good one Jake, but I'm wondering where can I get more info about using that kind of comments structure , any link to point us?
Cheers!
Alex
Reply
Re: Really interesting
Glad you like. That's about all there is to it though I'm afraid (as far as I know). All you can test is the browser version. Bit lame bit it's better than a kick in teeth.
It's documented on the Microsoft site but explained no better than here ;-)
Do a search at [<a href="http://www.google.com">Google</a>] and see what you come up with...
Jake -codestore
Reply
Oh, the irony...
...that this page doesn't display correctly in Netscape! The tables are all screwed up, and no content displays past the "A Fresh Approach" paragraph.
I understand that Netscape may be hamstrung by fancy stuff, but this is just plain HTML...
Reply
Re: Oh, the irony...
Hmm, not sure if that's irony or not. Depends how you are looking at it. What may be irony is that you assumed it was this comment trick that caused the problem when in fact it was a <blockquote> tag I used about half way down.
Irony. Never really understood it, and I'm not even American ;-0
Anyway, I've removed the problem causing blockquote so all should be well now.
Thanks for letting me know by the way. That'll teach me to not bother looking at it in Netscape.
Jake -codestore
Reply
Show the rest of this thread
where would you use this (since it's limited)?
This is very interesting, and would be phenomenal if it worked in all browsers, and very cool if it worked in all versions of IE, but since it's IE 5+ (and apparently only works on windows, since I'm using IE5 on the Mac and I didn't see the red writing) then when would it be useful?
I'd love to use it, but can you tell me when I'd want IE 5 or 6 for windows to act <i>one</i> way, and everything else to act another way?
Reply
Netscape Version Here!!
Turns out you can use [<a href="http://www.dynamicdrive.com/newsletter/issue9.htm#2">Netscape Conditional Comments</a>] as well.
They are more powerful as well. You can use any JavaScript expression that results in a boolean true of false.
An example: [<span class="JavaScript">] <!--&{navigator.platform=="win95"}; You are using the Win 95 version of NS 4 or above! --> [</span>]
And there was me thinking it was Microsoft being the goodies. They were just playing cath-up after all...
Jake
Reply
why not do object/feature detection?
http://www.mozilla.org/docs/web-developer/upgrade_2.html
Reply
Show the rest of this thread
Thank you
Wow, this is great. I have been looking for something to seperate my IE5 and IE6 CSS style sheets but all of the other browser sniffers use javascript and group ie5 and ie6 together.
Thanks for posting the info
Reply
All those codes didn't work for me. I didn't see any red writing and it doesn't show anything in bold (there is bold, right?). Apperently my browser suck...
Then I remebered that I'm talking on my nentendo dsi...
Reply