outlook - HTML Emails: fallback for mso conditional?

Question

If you're like me, your eye will be twitching by the end of reading this. I don't blame you.

Our client has requested us to develop a responsive HTML email template, with two specifications:

1. Using as few images as possible
2. Using as many "fancy css-enabled features" as possible. Mostly, this just means rounded corners on boxes.

This question is specifically about executing the rounded corners. Gmail and Apple support CSS rounded corners, and Outlook requires vector graphics. For the remaining platforms, they're ok with using square edges.

Here's how we're detecting and executing outlook:

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

Works like a charm, even back to Outlook 2000. The problem is, I can't figure out how to create a fallback. Intuition says this:

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

but it just gets ignored outright as a comment by most other email clients, and then corners are missing from the boxes altogether. I ask you, fine members of the SO community: is it possible to deploy markup for all platforms except MSO? Perhaps there's a more clever way to accomplish this that I haven't considered? Or is email HTML still too stone-age to attempt something like this?

Answer 1

Found a solution after much brain-wracking. 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 it does is wrap the fallback in an invisible div in MSO, and deploys the vector solution instead.

Hope this helps someone in the future!