Search code examples
htmlconditional-statementshtml-email

HTML Email: !mso conditional trick

I'm relatively new to HTML Email Development, and I'm trying to improve my understanding of HTML Email structures by dissecting HTML Emails on "reallygoodemails.com".

In my forays, I've come across four different ways to create a conditional fallback for email platforms that are NOT Microsoft Outlook.

Version 1.

<!--[if !mso]><!-->
  <style>
    .innerTable{
      border: 1px solid black;
    }
  </style>
<![endif]-->

Version 2.

<!--[if !mso]><!---->
  <style>
    .innerTable{
      border: 1px solid black;
    }
  </style>
<![endif]-->

Version 3.

<!--[if !mso]><!---->
  <style>
    .innerTable{
      border: 1px solid black;
    }
  </style>
<!--<![endif]-->

Version 4.

<!--[if !mso]>-->
  <style>
    .innerTable{
      border: 1px solid black;
    }
  </style>
<!--<![endif]-->

Can anyone tell me what version I should use and explain WHY that particular version actually works cross-platform? Like, how does the syntax of your chosen fallback trick MSO into ignoring the code?

Solution

  • Conditional comments are a mecanism implemented by Microsoft in Internet Explorer (up until IE9) and in Word’s rendering engine (used by Outlook 2007 and above). The idea is to hide content for the rendering engine through a regular HTML comment so that no other rendering engines will see it. I’m going to detail the syntax that I use and then I'll get back to the difference between the syntaxes you observed.

    Here’s the syntax that I use to hide content from Outlook:

    <!--[if !mso]><!-->
<style>
    .innerTable{
        border: 1px solid black;
    }
</style>
<!--<![endif]-->

    Let’s break this step by step and see how Outlook and other rendering engines will interpret this.

    1. <!--: This is the opening of an HTML comment. Every rendering engine is expecting what’s next to be part of the comment and won’t display it on screen.
    2. [if !mso]>: This is the condition for rendering engines that support conditional comments (IE, Outlook). Other rendering engines and browsers will just see this as plain text, part of the comment. But IE and Outlook will evaluate the condition. The condition here is !mso (not mso). Outlook will see this and think “Well, I am mso! I’d rather ignore everything that follows until I find the [endif] statement.”
    3. <!-->: This closes the HTML comment opened on step 1. Outlook ignores this as it’s part of the !mso content. But other rendering engines will understand this and think “Ok, this comment is over. Better get ready to execute and display what’s next.”
    4. <style>…</style>: This is our HTML content. It’s hidden for Outlook because it’s still part of the !mso condition. And other rendering engines will render this as normal.
    5. <!--: This is the opening of an HTML comment (again).
    6. <![endif]: This is the closing condition statement for rendering engines that support conditional comments (IE, Outlook). Outlook will evaluate this and think “Ok, condition time is over. Back to work then.”. Other rendering engines and browsers will just see this as plain text, part of the comment.
    7. -->: This is the closing of the HTML comment opened on step 5. This is evaluted by all rendering engines.

    Now you might be thinking: “Why did we use <!--> on step 3 and not just -->?” Well this is a nice trick at play to take in account for other rendering engines that do support conditional comments (like Internet Explorer). IE will see the !mso condition and think “Well, I'm certainly no mso. Let’s see what’s next for me!” If we were to just have a closing HTML comment (-->), IE would freak out as it’d see a closing without an opening. So that’s the trick: <!--> both opens and closes an HTML comment at the same time. We could also write this <!-- --> or <!-----> (as you noticed in your Version 2 and 3).

    As for the difference between the other versions you posted, Version 1 and 2 only use <![endif]--> as a closing statement. This is correct for Outlook, but incorrect for any other rendering engines. Luckily, they render this as an HTML comment anyway. So it ends up working correctly, but it is not valid in a standard way.

    So my recommendation is to always use the following syntax to hide content from The Outlooks:

    <!--[if !mso]><!-->
…
<!--<![endif]-->

    And if you need to show content only on The Outlooks:

    <!--[if mso]>
<![endif]-->

    Other ressources that might be useful: