Reliable Solution for Conditional Comments in Outlook.Com HTML Emails

Reliable solution for conditional comments in Outlook.com HTML emails

Those sites that say you can do that are wrong. Outlook.com eats your conditional comments, and anything inside of them. Gave me quite a headache for a while.

For things where you need to use conditional comments, I found the best thing to do was to have the regular conditional comment section, but also include another table row / column or what have you with a class like class="outlookcom" (on the td) and hide it with display:none. Then, in your <style> tag you can target that hidden row with ecxoutlookcom (outlook prepends 'ecx' to all of your classed tags) and use display:block !important to show itfor outlook.com

HTML E-Mail conditional comment for Outlook (margin)

Don't do that -- the idea is you find a solution for the margin that resolves everywhere your supporting. Do not hack or try to condition an email!

margin is not supported in Outlook but, padding is, so use padding!

There is also additional reach arounds you could utilize such as nesting additional tables or using small white images to recreate the space. There is always a solution that you can use across - your email will be much more stable if you find it instead of trying to hack with conditionals.

Also this is a decent reference.

Specific to outlook 2007 info.

But if you really must (sigh).. it is possible; the below is targeting Outlook 2007 specifically:

<!--[if gte mso 12]>
    <style type="text/css">
    /* Your Outlook-specific CSS goes here. */
    </style>
<![endif]-->

the mso 9 correlates with outlook 2007 below is a list of more:

Outlook 2000 - Version 9
Outlook 2002 - Version 10
Outlook 2003 - Version 11
Outlook 2007 - Version 12
Outlook 2010 - Version 14
Outlook 2013 - Version 15

Read More about this.

Note: While this is possible, I still suspect using these will create more problems in the long wrong.

Good luck!

Is there a html conditional statement for everything not Outlook?

Try this:

<!--[if !mso]>-->
  content targeted at non-outlook users goes here...
<!--<![endif]-->

HTML Conditional Statement for Outlook.com

Outlook for Mac (at least the 2016 release) uses Webkit to render content rather than the MS Word engine that most Windows versions of Outlook used. The good news here is that you don't need to jump through as many hoops to get it to render things 'correctly'. The bad news is that that's why [if mso] doesn't work here.

Outlook.com appears to strip all conditionals, which is why you're not seeing the image there either.

Probably not the news you are after, but hope it helps.

How to conditionally display certain information in emails on Outlook.com?

Only thought I have to help would be to use the 'mso-hide:all' css. Mind you in nested tables, you will need to use on each section to make sure it is not rendered.

e.g. <table style="mso-hide:all;">

I have not tested this in Outlook.com, but thought maybe it might help...

Empty HTML Emails In Outlook.com When Using MSO Conditional !--[if !mso]

Recently, I ran into an issue with blank emails for outlook.com (@hotmail and @live) email accounts. The issue we experienced had to do with CSS comments in our inline stylesheets. Basically, what fixed the blank email experience for me was changing CSS comments to server-side comments (or deleting them entirely). If I had CSS comments like /* comment */ in our CSS, outlook.com would render blank emails.

View possible solutions here

In addition, I personally don't think its good practice to use external stylesheets in HTML emails (or email in general). It is best to add your CSS via <style></style> tags in the <head> of your template/email, or to go further and inline that same CSS to each HTML element in the email. Here's some background on why you shouldn't include external stylesheets in email:

Can you link to a CSS file from an email?
http://beaker.mailchimp.com/inline-css (manual inline tool)
http://www.benchmarkemail.com/help-FAQ/answer/Common-HTML-Email-Coding-Mistakes

Update

As @digitalmc pointed out in the comments, it seems the issue is related to having HTML in your client side comments.

How to apply Conditional content for Outlook webmail

So, I finally figured it out.

[class~="x_showlaterout"], [class~="x_showlater2out"]{   /* work around for outlook.com */
                    opacity:1 !important;
            }

You need to create a class styling like this [class~="x_classname"]{outlook.com specific code } because outlook.com automatically changes any class to include x_. After you do that then you add the class to the element you want to affect but with out the x_. So in this case it would be showlaterout and showlater2out. This let you have the effect you want, but then when a user opens it on outlook.com it will change the class to x_showlater2out and x_showlaterout which will apply the style you created because the classes now match

Conditional Operator for Email Client not working

I see what you're trying to do there.
One thing to note, that code is Outlook specific, so your !mso is basically telling Outlook to ignore the code it's wrapped around, rather than show in other email clients.

Also, your non-Outlook conditional statement should be without the brackets around mso.
Like this: ...[if !mso]...

Your !mso is hiding the fallback, so you need to include a slight variation of the conditional code. You should note the extra  at the beginning and the  at the end of the !mso conditional.

What this does is allow the non-Outlook content to display un-commented for all other email clients but at the same time hide that content in Outlook.

Here are some good resources to help get your head around this technique:

1 - https://stackoverflow.design/email/base/mso

2 - HTML Emails: fallback for mso conditional?

3 - https://litmus.com/community/discussions/396-conditional-code-for-outlook

Here is how your code should look:

<!-- ### RENDER EVERYWHERE ELSE ### --><!--[if !mso]> <!---->  <td>Non Outlook</td><!-- <![endif]-->
<!-- ### RENDER IN OUTLOOK ONLY ### --><!--[if mso]>  <td>Outlook only</td><![endif]-->

Reliable Solution for Conditional Comments in Outlook.Com HTML Emails