Conditional Comments for HTML Email

Take a look at this:

<!--[if gte mso 9]>

<![endif]-->

Chances are the general syntax will be instantly familiar — it’s a conditional comment, useful for feeding specific content only to Windows versions of Internet Explorer. But did you know they work for Office applications too?

Neither did I … until recently.

We’ve just overhauled the HTML templates for our email newsletters … a painful process to be sure — if you think that web browsers are harsh task-masters, you should try coding to suit email clients! A recent article, How to Code HTML Email Newsletters, spells out just how convoluted it can be, and how arcane are the techniques you have to resort to, to produce a decent layout in the most popular email clients. And the issue has been further complicated by the fact that one of the most popular Windows clients — Outlook — no longer uses Internet Explorer for HTML rendering, it uses Word!

And it was while perusing the franken-code that passes for “Save as Web Page” output from a Word document, that I first saw these little nuggets — exactly what we needed to hide bits of content from Outlook that were just too mangled to leave.

So there you go. If you’re publishing HTML email and struggling with Outlook’s rendering, here’s an extra little tool for the kit. The syntax even implies that it can be used for granular targetting of Office versions all the way back; but I haven’t tested this, so any information is gratefully received :)

Free book: Jump Start HTML5 Basics

Grab a free copy of one our latest ebooks! Packed with hints and tips on HTML5's most powerful new features.

  • http://www.tyssendesign.com.au Tyssen

    I’m viewing this post in Opera 9.5 and the conditional comment doesn’t show up even though it did when I was viewing the feed entry from within Opera.

    And on the subject of your new HTML emails, they actually appear a bit broken in the header when viewed in Opera (the old version wasn’t).

  • http://www.tyssendesign.com.au Tyssen

    Hmmm, I’ve just come back to the page again and I can see the CC now. Not sure what was going on before. :/

  • http://www.brothercake.com/ brothercake

    Yeah I know they are a little out of whack in opera (because like you, i live and breathe in opera :)) but they weren’t really targetted at web browsers – there’s only so many client environments one can deal with at a time :)

  • http://www.iraqtimeline.com/ Black Max

    >>Outlook — no longer uses Internet Explorer for HTML rendering, it uses Word!

    I knew there was another reason why I won’t use Outlook. Don’t use Word, either. Wish I didn’t use Windows.

  • Dave Greiner

    Nice one guys, this could really make life easier those (too frequent) occasions when Outlook 2007 won’t play ball. We did some additional testing on this method and wrote about the results on our blog.

  • randywehrs

    This is a huge help! I’ve tried conditional comments to target different email clients to no avail, but never would have tried “gte mso 9“. What does this mean?

  • Brent Edwards

    Brothercake: Get rid of Opera!!!

  • http://www.sitepoint.com AlexW

    This is a huge help! I’ve tried conditional comments to target different email clients to no avail, but never would have tried “gte mso 9“. What does this mean?

    Greater Than or Equal to MicroSoft Outlook 9

  • randywehrs

    Greater Than or Equal to MicroSoft Outlook 9

    Ah, it almost makes too much sense.. I’m still quite surprised that it works. Many many kudos to James Edwards and Sitepoint! My boss came back to me and asked me how I got this to work. Keep the .html email stuff coming!!

  • steve j

    The ‘o’ refers to ‘office’ not just ‘outlook’. If you save Word or Excel docs as ‘Web page’ you’ll see the same kind of thing.
    Across versions of Microsoft Office (since Office2000) MS has been changing the markup formats its apps use. They are largely incompatible with one another. The conditionals help sort out differences mainly to assist with interoperability of documents among versions of MSOffice (and IE).
    A cynic might say that OOXML is Microsoft’s attempt to set a standard for itself.

  • http://www.brothercake.com/ brothercake

    Just because a statement is cynical, doesn’t mean it’s not true ;) Of course OOXML is Microsoft ratifying their own proprietary format as a standard, which is why it was initially rejected, and why it should never have been accepted. The whole thing smells bad to me.

  • http://www.cygnismedia.com/web-application/ Web Application Developer

    But some newsletter were going to be wastage of time