How to display browser specific HTML?

javascript html conditional browser-detection

38,276

Solution 1

I don't think this is possible with conditional comment tags (which only work in internet explorer)

Sure it is. You just have to leave the content for non-IE browsers in a position such that it's part of a conditional comment clause but not actually inside a . Then browsers that don't know about conditional comments will see the content fine. This is known as a downlevel-revealed conditional comment.

Unfortunately the markup Microsoft give you there is invalid HTML (and not even well-formed XML). To make it pass muster you just need a few additional ‘--’s:

<!--[if IE]> This is IE! <![endif]-->
<!--[if !IE]><!--> This ain't IE! <!--<![endif]-->

Although I have to echo AnonJr's non-answer, in that it's rare you should need a completely separate link/page for IE compared to other browsers. If you're doing something tricky like complex VML and ActiveX work in IE with Flash on other browsers I guess there could be a reason for it, but usually a few CSS and script hacks over the same basic page should suffice.

Solution 2

This is not going to be the popular answer, but its damn time somebody started posting it - stop with the browser-specific junk. You're only perpetuating future problems when new versions come out.

If developers had taken the additional time (yes, it takes time and hard work. If you can't convince your clients you aren't trying hard enough) then we wouldn't have seen IE7 "break the web" and there would have been even less of a brouhaha with IE8.

Yes, IE is less standards compliant than the others. But, Fx is also missing certain things that are a part of the standard too. They all suck when it comes to "standards". But they are all getting better. (At different rates, but they are all getting better.)

Think first why you are trying to do this, and ask yourself if you really want to deal with this when the next browser version comes out and you have to re-jigger your browser detection and how you handle version X of browser Y.

[/rant]

Edit: To answer some of the comments that point out the obvious fact that I didn't really answer the question, without more information this question makes me wonder if we're not trying to help a person decide to hammer in a nail with a glass bottle or a shoe...

Solution 3

This is the Microsoft-approved way:

<!--[if IE]>
    <a href="ie-only.html">click here!</a>
<![endif]-->
<![if !IE]>
    <a href="all-other-browsers.html">click here!</a>
<![endif]>

More information available at http://msdn.microsoft.com/en-us/library/ms537512(VS.85).aspx.

Edit

This code is implicitly guaranteed to work in all current and future versions of IE starting with IE 5. For non-IE browsers, the code works by relying on those browsers ignoring the "nonsensical" <![if !IE]> tag, which they all do, and I've never seen it fail. For a version that uses nothing but good ol' HTML comments, see bobince's answer, which I actually prefer to the Microsoft-provided solution.

Solution 4

One way that I've figured out how to do it:

Get the javascript code from http://www.quirksmode.org/js/detect.html and put it in the <head> tag.

Then in your <body> tag use:

<script type="text/javascript">
<!--
if (BrowserDetect.browser == 'Explorer') {
    document.write('<a href="#">Explorer</a>');
} else {
    document.write('<a href="#">Other Browsers</a>');
}
// -->
</script>

Not sure if this is the most simple way to do it but it got the job done.

Solution 5

A shot in the dark, maybe, but would this work?

<style>

    a.forIeOnly {display: none; }
    a.notForIe  {display: block; }

</style>

<!--[if ie]>

<style>
    a.forIeOnly {display: block;}
    a.notForIe  {display: none; }
</style>

<![endif]-->

<a href="#" class="forIeOnly">Link One</a>
<a href="#" class="notForIe">Link Two</a>

It's nowhere near as clean/attractive as an if/else statement could be, but...it was the easiest way I could think of to implement a solution. Though it may well be fraught with issues all of its own.

View more solutions

38,276

Author by

Mike

Updated on January 31, 2020

Comments

Mike over 4 years
I'm trying to find a way to display one link to an IE user and another link to all other browsers using javascript or conditional comments (or whatever it takes).

Basically...
```
//pseudo code

```
I don't think this is possible with conditional comment tags (which only work in internet explorer). Plus I don't think there is an "else" statement.

Is there a way to do this with javascript? Please help! Thanks!
Peter about 15 years

You're just shooting around, not giving an alternative /not/ use these functions then?? That's for many things just impossible. (eg : passing parameters to xslt files to name one)
luiscubal about 15 years

@Peter - Object detection? Not tested in your particular case, since I never used XSLT.
Mike about 15 years

I totally agree, but that's not why I'm doing this.
Tom Wright about 15 years

Surely the second link will be part of a comment (and therefore ignored) by all non-IE browsers anyway?
Amit Patil about 15 years

That works via sniffing the user-agent string, which is about the worst, most unreliable way of forking on browser behaviours; it doesn't say “If you're new to JavaScript, don't use this script” for nothing!
KOGI about 15 years

As Tom said, since IE is the only one that honors conditional statements like this, and the condition is !IE, the second link will NEVER show.
David Kolar about 15 years

For all non-IE browsers, the first section is an HTML comment. The second section is not an HTML comment--the double dashes after <! are not there. "<![if !IE]>" is ignored by non-IE browsers, but the HTML that follows is not. I assure you the second link appears in all non-IE browsers. :)
David Kolar about 15 years

"Conditional comments" have the advantage of working regardless of whether or not the client has JavaScript enabled.
David Kolar about 15 years

+1; what a great answer. There's a lot less nose-holding needed with this version, and I'll use it. It should work in every browser, and indeed there are no problems in IE6, 7, or 8. Nevertheless, I wish it had the same level of "blessing" from Microsoft as their own example, just to be sure.
user3532201 about 15 years

I don't see a problem with using the user-agent string. Most users won't mess with it, and if they do, they know that it may result in strange behavior.
vefthym about 15 years

But when new versions come out it is possible for strange behavior to happen without the user being aware of it... hence my lack of love for targeted solutions.
vefthym about 15 years

The problem with relying on flaws like that is when the browser maker fixes them you now have to scramble to find a new hack to get the same functionality. Relying on "flaws" is part of what got everybody so worked up about IE8 "breaking teh web"
David Kolar about 15 years

This is a great answer to the question "Should I ever display browser-specific HTML?", but that's not the question that was asked.
vefthym about 15 years

@David: True, but I think this falls under the "Should I hammer this nail with a glass bottle or an old shoe" question. weblogs.asp.net/alex_papadimoulis/archive/2005/05/25/…
gpr almost 11 years

Appreciate the sentiments behind your response, but it would be more appropriate to answer the question first and add this as a warning. The OP might have a very valid reason for doing this; many companies have IE as their default browser and (unfortunate) intranet features that only work with IE.
vefthym almost 11 years

@gpr - I refuse to be an enabler. While this sort of thing is certainly the quicker answer to a problem, I've yet to come across a situation where there was no other option - even on an intranet. The long-term benefits of not adding in browser-specific hacks have far outweighed the extra time and effort it took to figure out a more appropriate approach.
gpr almost 11 years

I'm very jealous - I can't imagine what it must be like in a world without legacy systems, admin access restrictions, restricted network privileges, proprietary MS features, or time and budget constraints. I don't know many developers who don't want to do it the right way, but sometimes you have to go with the best compromise :o/
vefthym almost 11 years

@gpr - I work in a predominantly MS environment, with all sorts of odd restrictions, and various parts of the company are on either Safari (Marketing's Macs) or (only recently upgraded to) IE7/8, or are accessing the system via their iPad (mostly the doctors). I am my dev team, I have two other major responsibilities other than the website, and I have no budget to speak of. It really can be done.
Amit Patil over 10 years

@Marc: conditional comments have been removed in IE10 (except for compatibility modes), so you can only use them to inject fallbacks up to IE9. See msdn.microsoft.com/en-us/library/ie/hh801214(v=vs.85).aspx for background. Luckily IE10+ is generally good enough that you rarely need the browser-sniffing at the content level.
David Kolar over 10 years

@Marc That is correct, conditional comments in IE do not work beyond IE 9 mode. You could still use feature detection and/or UA sniffing.
Sikshya Maharjan over 6 years

@geisterfurz: thank you so much! I'm a little appalled to realise that a typo survived in my answer for almost eight years... >.<