HTML letters: backup for mso conditionally?

Question

If you look like me, your eye will twitch towards the end of it. I do not blame you.

Our client asked us to develop a flexible HTML email template with two characteristics:

• Using as many images as possible
• Use as many "useful CSS-enabled features as possible." This basically means rounded corners on the boxes.

This question is about making rounded corners. Gmail and Apple support rounded CSS corners, while Outlook requires vector graphics. For other platforms, they are suitable using square edges.

Here we find and execute the appearance:

<!--[if mso]><v:shape>...</v:shape><![endif]--> 

It works like a charm, even back to Outlook 2000. The problem is that I cannot figure out how to back up. Intuition says this:

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

but it is simply ignored as a comment by most other email clients, and then the corners are missing in the boxes. I ask you, great members of the SO community: is it possible to deploy markup for all platforms except MSO? Maybe there is a smarter way to do this that I have not considered? Or is HTML email too stony to try something like this?

Answer 1

Found a solution after a big brain wash. Instead of this:

 <!--[if mso]><v:shape>...</v:shape><![endif]--> <!--[if !mso]>[fallback goes here]<![endif]--> 

This works very well:

 <!--[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]--> 

All he does is wrap a backup of an invisible div in MSO and deploy a vector solution instead.

Hope this helps someone in the future!

Answer 2

This also works without the need for a hidden div.

  <!--[if mso]> Outlook content <![endif]--> <!--[if !mso]> <!----> Non-outlook content <!-- <![endif]--> 

The trick is to reopen the comment before closing it on line 4 -

 <!----> 

Little. If you do not, IE will display a “->” in front of the content without appearance. Other browsers do not have this problem.

Answer 3

Although the CodeMoose solution hides the backup; in my tests, he left a place for where the reserve will be (I read that Outlook does not display overflow: hidden). This did not work for my layout, as it hit other elements.

After a big search, I found that if you make a small modification to the CodeMoose proposal, it will hide your reserve and not add an extra interval :

 <!--[if mso]> <v:shape>...</v:shape> <![endif]--> <[fallback goes here] style="mso-hide:all;"> 

By adding "mso-hide: all;" to the real style of your reserve, Outlook will crash and ignore your backup code, thereby saving your layout. And your reserve still perfectly displays clients that can handle the complex CSS that you used VML to try to replicate, for example, in Outlook for Mac.

Answer 4

I'm having trouble with Outlook contacting Times New Roman when using a special font with the @ font-face declaration. Not only did I have to hide the @ font-face declaration from Outlook using a conditional expression around my own style block. (all other styles go in another block). I also had to wrap the text content twice in between with a conditional tag. Just to give an example of how this method posted by @CodeMoose (see above) works when using a custom font.

 <!--[if !mso]><!--> <style type="text/css"> @font-face { font-family: 'Museo100'; src: url('http://www.somesite.nl/site/fonts/museo100-regular-webfont.eot'); src: url('http://www.somesite.nl/site/fonts/museo100-regular-webfont.eot?#iefix') format('embedded-opentype'), url('http://www.somesite.nl/site/fonts/museo100-regular-webfont.woff') format('woff'), url('http://www.somesite.nl/site/fonts/museo100-regular-webfont.ttf') format('truetype'), url('http://www.somesite.nl/site/fonts/museo100-regular-webfont.svg#museo100') format('svg'); font-weight: normal; font-style: normal; } <!--<![endif]--> 

At first I tried to put a conditional expression around my “Museo300” font declaration inside the inline style, but this obviously didn’t work, so I had to double-transfer the content into two ranges with style declarations. Internal is conditional for non-MSO.

 <span style="color: #00B2EB; font-family: arial, sans-serif; font-size: 14px; line-height: 19px; font-weight: normal;"> <!--[if !mso]><!--><span style="font-family: Museo100;"><!--<![endif]--> Text goes here, shown in Museo in Apple mail while this method shows in Arial in Outlook (and others that do not support custom fonts <!--[if !mso]><!--></span><!--<![endif]--> </span> 

This works great for Outlook to display text in Arial and Apple mail to display text in Museo font. Other clients (such as Android mail) have normal backup behavior and simply show Arial.