12

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
<!--[if IE]>
    <a href"ie-only.html">click here!</a>
<!--[else]>
    <a href"all-other-browsers.html">click here!</a>
<![endif]-->

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!

Andrew
  • 227,796
  • 193
  • 515
  • 708

9 Answers9

23

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 <!-- comment -->. 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.

bobince
  • 528,062
  • 107
  • 651
  • 834
  • +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. – David Kolar Apr 13 '09 at 14:42
  • 3
    @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 http://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. – bobince Dec 03 '13 at 12:53
14

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...

AnonJr
  • 2,759
  • 1
  • 26
  • 39
  • 1
    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) – Peter Apr 10 '09 at 21:45
  • @Peter - Object detection? Not tested in your particular case, since I never used XSLT. – luiscubal Apr 10 '09 at 22:09
  • I totally agree, but that's not why I'm doing this. – Andrew Apr 10 '09 at 22:25
  • 7
    This is a great answer to the question "Should I ever display browser-specific HTML?", but that's not the question that was asked. – David Kolar Apr 13 '09 at 20:30
  • @David: True, but I think this falls under the "Should I hammer this nail with a glass bottle or an old shoe" question. http://weblogs.asp.net/alex_papadimoulis/archive/2005/05/25/408925.aspx – AnonJr Apr 13 '09 at 20:59
  • 1
    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. – gpr Jul 31 '13 at 02:00
  • @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. – AnonJr Jul 31 '13 at 20:10
  • 1
    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/ – gpr Aug 01 '13 at 05:18
  • @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. – AnonJr Aug 01 '13 at 12:20
6

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.

Community
  • 1
  • 1
David Kolar
  • 3,475
  • 25
  • 34
  • Surely the second link will be part of a comment (and therefore ignored) by all non-IE browsers anyway? – Tom Wright Apr 10 '09 at 23:38
  • 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. – KOGI Apr 11 '09 at 00:06
  • 2
    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 Apr 11 '09 at 03:18
  • 2
    @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. – David Kolar Dec 03 '13 at 17:54
3

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.

Andrew
  • 227,796
  • 193
  • 515
  • 708
  • 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! – bobince Apr 10 '09 at 23:53
  • 1
    "Conditional comments" have the advantage of working regardless of whether or not the client has JavaScript enabled. – David Kolar Apr 11 '09 at 03:21
  • 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. – Adam Jaskiewicz Apr 13 '09 at 15:09
  • 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. – AnonJr Apr 13 '09 at 15:42
2

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.

geisterfurz007
  • 5,292
  • 5
  • 33
  • 54
David Thomas
  • 249,100
  • 51
  • 377
  • 410
  • @geisterfurz: thank you so much! I'm a little appalled to realise that a typo survived in my answer for almost eight years... >. – David Thomas Jan 30 '18 at 16:17
1

Add this to your header : 

<script src="http://github.com/rafaelp/css_browser_selector/raw/master/css_browser_selector.js" type="text/javascript"></script>

Then whatever you want to your .css page :

/* Chrome Only */
.chrome embed {
    display: none;
}

/* Firefox Only */
.gecko video {
    display: none;
}

Source : http://rafael.adm.br/css_browser_selector/

Available Browser Codes [browser]:

ie - Internet Explorer (All versions)
ie8 - Internet Explorer 8.x
ie7 - Internet Explorer 7.x
ie6 - Internet Explorer 6.x
ie5 - Internet Explorer 5.x
gecko - Mozilla, Firefox (all versions), Camino
ff2 - Firefox 2
ff3 - Firefox 3
ff3_5 - Firefox 3.5
ff3_6 - Firefox 3.6 new
opera - Opera (All versions)
opera8 - Opera 8.x
opera9 - Opera 9.x
opera10 - Opera 10.x
konqueror - Konqueror
webkit or safari - Safari, NetNewsWire, OmniWeb, Shiira, Google Chrome
safari3 - Safari 3.x
chrome - Google Chrome
iron - SRWare Iron
Nato Boram
  • 4,083
  • 6
  • 28
  • 58
0

I didn't try, but maybe you could use IE flaws on CSS. Eric Meyer has written this article on the subject: Tricking Browsers and Hiding Styles.

mouviciel
  • 66,855
  • 13
  • 106
  • 140
  • 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" – AnonJr Apr 13 '09 at 15:45
0

You could always use CSS to hide the code from specific browsers. For instance, considering the following code:

<a href"ie-only.html" id="ie-only">click here!</a>
<a href"all-other-browsers.html" id="other-browsers">click here!</a>

You could apply the following CSS hacks, and the appropriate links would be displayed to the appropriate browsers.

/* Display settings for most browsers */
#ie-only {display: none;}
#other-browsers {display: block;}

/* Display settings for IE <= 6 */
* html #ie-only {display: block;}
* html #other-browsers {display: none;}
Jacob Hume
  • 1,953
  • 2
  • 13
  • 14
0

IE supports conditional compilation, which you can use to easily deliver IE-only code without needing to perform user agent sniffing or feature detection.

/*@cc_on
   /*@if (@_jscript)
      alert("IE.");
   @else @*/
      alert("Not IE.");
   /*@end
@*/
Jonny Buchanan
  • 61,926
  • 17
  • 143
  • 150