HTML 电子邮件:mso 条件的后备? [英] HTML Emails: fallback for mso conditional?

问题描述

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?

解决方案

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!

这篇关于HTML 电子邮件:mso 条件的后备?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！