I understand that in order to display outlook-specific HTML within an email I can implement code such as:
<!--[if (gte mso 9)|(IE)]>
Welcome to the newsletter.
<![endif]-->
However, how do I implement if/else logic. For example, without using CSS classes, I need to display one section of content in Outlook and a completely different section of content in other clients.
Is this possible?
(CSS Classes have proven to be unreliable hence my requirements for conditional HTML instead).
The conditional coding IS actually the IF/ELSE statement. The issue is the ELSE part is not built in. To solve your issue, you need something to hide the content you no longer want MSO to use but show up in all other clients.
This can be handled either through conditional classes (in the if statement) OR, as you mentioned you did not want to use classes, you can use the mso-hide:all css that is only recognized by Microsoft office.
Found a great example of this for reference. Pulled from this post:
<!--[if mso]>
<v:shape>...</v:shape>
<div style="width:0px; height:0px; overflow:hidden; display:none; visibility:hidden; mso-hide:all;">
<![endif]-->
[fallback goes here]
<!--[if mso]></div><![endif]-->
This is a good reference on usage of mso-hide:all
Related
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?
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.
<!--: 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.
[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.”
<!-->: 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.”
<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.
<!--: This is the opening of an HTML comment (again).
<![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.
-->: 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:
Different conditional comments examples
Microsoft documentation about conditional comments
A blog post I wrote about Outlook rendering engine
What do I need?
I need to make all content of the email into a single A4 size Page.
CSS
<body style="height:297mm;width:210mm;margin-left:auto;margin-right:auto">
----email content---
</body>
when i try to viewsource email css property were already there.
Problem
when try to print from ms outlook then html content move in 2 page of which my need is 1 page.
working css in browser
when i try to print the same content from browser then im able to get html content in A4 size page.
can anyone suggest how to shrink all content into single a4 size page.
any suggestion is most welcome.
Stop looking for a reason : mail clients are very though regarding CSS properties.
When you write an e-mail, almost no CSS property is accepted.
You can find an exhaustive list here.
After having played around with it a little bit, I can tell you that the best option to send a formatted mail is to create a table and style this table with inline styling.
Good luck with that, you will need it.
I suggest you to write styles in pixels. I have a such big experience in Email markup and Microsoft Outlook really harmful.
And Im not sure that margin: auto will work properly in Outlook.
So, try to write for example:
<body style="height:500px;width:500px;">
The Solution that worked for me In Ms Outlook.
<div>
<!--[if mso]>
<v:rect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-
microsoft-com:office:word" href="http://" style="yourstylinghere;"
stroke="f" fillcolor="#556270">
<![endif>
your content
<!--[if mso]>
</v:rect>
<![endif]-->
</div>
I need to make a rounded button for a newsletter, the HTML code is insert in a web base tool used for newsletter
most of the contents are ok but a yellow button with rounded corner on windows 10 mail client lose the rounding and the padding
I try to use different tags like button or change to display block and use the prefixed css style without any success
If is not possible i we will use some images
<p><span style="display:inline-block; background-color:#ffce00; padding: 10px 45px; border-radius:20px; color: #000; font-weight: bold;">Click</span></p>
you can try something like this below (I've tested successfully this type of code in MS outlook), the trick is the VML attribute arcsize
<div><!--[if mso]>
<v:roundrect xmlns:v="urn:schemas-microsoft-com:vml" xmlns:w="urn:schemas-microsoft-com:office:word" href="http://" style="height:40px;v-text-anchor:middle;width:200px;" arcsize="50%" stroke="f" fillcolor="#ff0000">
<w:anchorlock/>
<center>
<![endif]-->
<a href="http://"
style="background-color:#ff0000;border-radius:20px;color:#ffffff;display:inline-block;font-family:sans-serif;font-size:13px;font-weight:bold;line-height:40px;text-align:center;text-decoration:none;width:200px;-webkit-text-size-adjust:none;">Click</a>
<!--[if mso]>
</center>
</v:roundrect>
<![endif]--></div>
Source and Generator
Getting CSS to appear correctly in mail clients is a bit of a pain. When I was doing this type of work we used this compatibility chart before we made formatting decisions.
[https://www.campaignmonitor.com/css/]
Another good tool is Litmus to check formatting between clients is Litmus.
[https://litmus.com/]
Wish I had a better answer for you, hope this helps.
working on an e-mail template i noticed outlook and outlook.com strips out "margin", my solution is to add additional line for those clients like
<td height="20" valign="top"> </td>
but i would like to use margin on supported clients, so i put this in a conditional block
<!--[if mso]>
<td height="20" valign="top"> </td>
<![endif]-->
Anyone knows if ALL versions of outlook are stripping out margin or is it just some of them (newer ones?)? I read Microsoft dropped support for margin, but I didn' find any information in which version it was dropped.
do i have to use additional condition to avoid older versions of outlook rendering margin like
<!--[if (gte mso 12)]>
to only affect 2007+ for example?
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!
As per the EmailonAcid Article Outlook.com DOES Support Margins.
The fix for this is ridiculously simple. All you have to do is capitalize the "M" in Margin. That's right, changing all of your "margin" to "Margin" will cause them to work properly in Outlook.com.
I know we can conditionally target Outlook '07-'13, but it seems that Outlook.com also matches my condition.
<!--[if !mso]><!--><br /><!--<![endif]-->
Is there a better code for this statement to where it does not match Outlook.com?
Yes there is. Why post an answer with an "i dunno."?
Anyway, Outlook.com prepends all of your classes with ecx. What I like to do is make make the td 0 height (height="0" style="font-size:0px; line-height:0px;"), add your class class="outlookthing" and in your <style> correct for the 0 height with a td[class="ecxoutlookthing]{font-size:XXpx; line-height:XXpx; height:XXpx;}
There's no real way of accomplishing this; may have to take a look at the HTML to figure out what's causing this and another way to do it.
Sorry I can't help more.
What about
<xsl:comment>
<![CDATA[[if mso 12]>Contents for 2007<![endif]]]>
</xsl:comment>
<xsl:comment>
<![CDATA[[if mso 14]>Contents for 2010<![endif]]]>
</xsl:comment>
<xsl:comment>
<![CDATA[[if mso 15]>Contents for 2013<![endif]]]>
</xsl:comment>