Conditional comments

Friday, 19 November 2004

I’ve received a number of questions about the way I promote Firefox on this website. IE users see a large red bar on top of every page that will basically tell them to get Firefox. Most questions were about the way I show this red bar… Well thanks to Microsoft, it is actually very simple. Oh, the irony.

IE supports something that is called conditional comments. They are basically an extension to the regular comments that are defined by the (X)HTML standards. Sounds complicated, but it really isn’t. The guys at Redmond even wrote very helpful tutorial about it.

In case you are wondering how my website looks like in IE, and what I am talking about, take a look at this screenshot:

20041119-ie

This is what the code on my website looks like:

<!--[if IE]>
  <div class='message'>
    <h1>It appears you are using the Internet Explorer web browser...</h1>
    <p>
      <a href='http://www.spreadfirefox.com/community/?q=affiliates&amp;id=3571&amp;t=54'>
        <img src='http://www.rakaz.nl/nucleus/skins/rakaz/get.gif' alt='Get Firefox!' />
      </a>

      This site relies heavily on web standards and unfortunatly Internet Explorer does not yet
      fully support web standards. Therefore your browser may not display this website correctly.
      We recommend that you download and try out a standards compliant browser such as
      Mozilla Firefox.
    </p>
  </div>
<![endif]-->

Everything between the  will be hidden from the browser, because the HTML standard defines this as a non-visual comment. IE however, recognized the [if IE] part after the <!-- and does display the content inside the comment. The advantage of this approach: it is completely compatible with the (X)HTML standards and it does not rely on things like server side or javascript browser detection.

39 Responses to “Conditional comments”

James wrote on November 20th, 2004 at 2:30 am ✦

Dude, your site looks like **** in IE.
mtekk wrote on November 20th, 2004 at 3:55 am ✦

just what i was looking for thanks, i knew there was a solution like this, i just didn’t know exactly what was used
redredkroovy wrote on November 20th, 2004 at 4:33 am ✦

That’s really nifty!
Aaron wrote on November 20th, 2004 at 5:07 am ✦

Can you please make one for perl? lol
Aaron wrote on November 20th, 2004 at 5:09 am ✦

Oh, Nevermind. lol, I got it.
Aur wrote on November 20th, 2004 at 11:17 am ✦

Fantastic!!
You should include the css style in the copy/paste code. I know it’s not standard, but it would be easier for other to include in their site.

Pour les francophones je viens de faire une version en fran
wackomenace wrote on November 20th, 2004 at 3:48 pm ✦

Nice one! Now I can finally tell all those IE jockeys to get a real browser. :)

I’m gonna use this in my site right now. Very clean coding using no server or client side scripting or the like.
aa wrote on November 20th, 2004 at 7:01 pm ✦

Hi Niels!

Sorry for the offtopic.. but what is this theme you’re using in the screenshot?

aa
Daniel Schierbeck wrote on November 21st, 2004 at 5:21 pm ✦

Nice! I’m sooooo gonna use this!
Charl van Niekerk wrote on November 22nd, 2004 at 8:21 am ✦

My site also displays a similar message (proudly) in IE. I’m just a little more blatant about it though, but I’ll change it to a more "proper" message soon.

Anyway, you can also do this using CSS if you like. Assuming you’ve got an ‘id’ attribute with the value ‘outdated’ in it on the element giving the warning, just insert the following line into your CSS:

body>#outdated { display: none; speak: none }

This will make the message disappear in better browsers, while leaving it displayed in IE. For a working example of this, just check my site.
Yonghan wrote on November 26th, 2004 at 2:53 pm ✦

I am inspired by your script and created Firebar. You can see it at http://hpstudios.homeip.net…
Dereck Thompson wrote on December 16th, 2004 at 9:10 am ✦

Geil!
Richard S wrote on December 22nd, 2004 at 12:04 pm ✦

First of all, this website looks REALLY good. And it’s really cute that this website requires Firefox, but dammit man, not even Firefox can scroll through this site at a sane speed… Scrolling is lagging A LOT.

Therefore, I don’t think I like this ‘standards-compliant’ website. No sir, it sucks.
rakaz wrote on December 22nd, 2004 at 12:17 pm ✦

Richard Personally I have no problems with lagging scrolling. And I am
using ‘only’ a Celeron 800 MHz here.
Martin wrote on December 23rd, 2004 at 3:09 am ✦

the site shows fine in Internet Explorer 5.2 for Macintosh, which is the "latest" version, but it does not support the if "IE" thing.
Richard S wrote on December 23rd, 2004 at 12:52 pm ✦

Rakaz, I just tried it on Firefox/win32 and scrolling appears a lot smoother (cetainly maximized at 1400×1200). Apparently this is a Firefox/GTK2 issue. Would you mind if I used this website as a reference for a bugreport I wish to submit to bugzilla?
rakaz wrote on December 23rd, 2004 at 2:09 pm ✦

Richard S: No problem to use this as a bugzilla example, however I do
think the people who might be going to work on this rather have a simplified
test case.
Nutrox wrote on January 23rd, 2005 at 7:04 pm ✦

Hi. Just thought I would mention that I do not have any problems with scrolling this site using Firefox. It might just be done to CPU speeds… I’m currently running a 1G PC with Windows XP.
Jeston Tigchon wrote on January 30th, 2005 at 11:46 pm ✦

Yeah – funny thing. On most sites with fixed-width backgrounds and semi-transparent PNGs, scrolling [for me at least] using firefox is horrid. Even on a 2ghz AMD with 512mb ram with very little load.

However, that’s not the case here. Good job.

BTW: Almost certainly will be using your great little hack here, although I don’t believe it works for versions of IE for Mac (which is all right with me, because thanks to the wonders of CSS importing and such they don’t get a stylesheet anyway!).
Zarya wrote on February 2nd, 2005 at 7:50 am ✦

This is a fantastic idea, and I hate to comment just to nitpick, but, uh, it’s
spelled ‘unfortunately’. You’ve got ‘unfortunatly’ in your screenshot, so I
just thought I’d give you the heads up. This just looks so good, it’s a shame
to be distracted by a typo. Again, fantastic idea, and after clicking around on
some commenters’ linked versions, I may try something similar myself. Thanks for
the inspiration.
ErikG wrote on February 2nd, 2005 at 4:56 pm ✦

You did inspire me to do the same on my site ( http://www.errorik.com/ ). I choose a CSS method, and my argument is that if IE was CSS compliant their users wouldn’t be subject to seeing the Firefox propaganda.
Mike's Information Technology Blog wrote on February 2nd, 2005 at 6:48 pm ✦

I found this interesting. A person is doing his “Switch to Firefox” campaign directly at IE users. Basically, he is making use of an IE feature that allows you to put conditional statements in HTML code. It is rather ironic…
Brett Elliff wrote on February 3rd, 2005 at 4:06 am ✦

Awesome idea! I am using it on my site now. http://gatewayy.net :) I just need need to figure out some weirdness with an alignment issue but thats not a big deal. :)
mmChronic wrote on February 3rd, 2005 at 4:52 pm ✦

Hi, it’s a great idea and I’ve used it as the rel="nofollow">basis for a Get Firefox plug which doesn’t mess the layout of
the page up as much.

It’s not quite as visible as yours though! :)
radu wrote on February 20th, 2005 at 4:33 am ✦

nice!!! gonna apply it right away on my sites

btw, what is that visual style you all firefox devs use and that you use on this screenshot? please answer. thx.
Mark Priestap wrote on March 1st, 2005 at 7:16 pm ✦

Thanks for the tip!
hmm wrote on March 7th, 2005 at 1:46 pm ✦

Note: you can use this trick to spoof the ‘Info Bar’.
Eero Helenius wrote on March 10th, 2005 at 8:17 am ✦

Hi,

I just thought it’d be appropriate to notify that I have adopted a slightly
modified version of your bar to my modest website
and at the same time thank you for bringing this technique into public
attention.

So… thanks. :)
Scrapbrain wrote on March 10th, 2005 at 1:32 pm ✦

Je viens de trouver un moyen plus radical de faire savoir aux visiteurs qu’Internet Explorer ne saura pas afficher le site.
Pour ceux d’entre vous qui veulent continuer
giz404 wrote on March 10th, 2005 at 1:35 pm ✦

I used the same technic on my blog, it works very well.

Thanks a lot !
dJeyL's French Blog wrote on March 16th, 2005 at 4:58 pm ✦

Et Firefox, c’est bien.

Voici donc une petite bidouille pour le faire comprendre aux utilisateurs effrontés d’Internet Explorer (viendez ici avec IE, pour voir).

Idée pompée sans vergogne
iyang wrote on March 18th, 2005 at 4:06 am ✦

Very nice! My curiosity finally answered. Thanks!
ZeFroG wrote on March 21st, 2005 at 8:53 pm ✦

I Will use it too, thank you !
A really good idea !
amjoe wrote on March 24th, 2005 at 12:04 am ✦

Great ! Way to go – Hope IE 7 would take this in to consideration !
MiniZiper wrote on April 17th, 2005 at 12:55 am ✦

How do you get the "red" box, it only appears the letters in my website….
MiniZiper wrote on April 17th, 2005 at 1:06 am ✦

Wait nevermind!!
Ekce wrote on September 22nd, 2005 at 2:40 am ✦

Yea Richard, I don’t think it’s the web site, cuz I’m on a 400MHz K6 II, and the scrolling is fine, Then again I am running linux….
T.Inc wrote on January 12th, 2006 at 8:20 pm ✦

Your website looks so bad in IE! That’s awesome! I thought I was the only one who didn’t care if my site looked good in IE.
Music photos wrote on May 9th, 2007 at 8:52 am ✦

Thanks, I was after the syntax, other sites’ code caused Firefox to render “if IE 6″ code, this works brilliantly, thanks again.