Fixing bugs with Outlook specific CSS

This is a very informative, yet frustrating article on the fun time that is coding Emails for Outlook.

https://cm.engineering/fixing-bugs-with-outlook-specific-css-f4b8ae5be4f4

Here is an excerpt from the article:

Conditional stylesheet

The most common way to code Outlook targeted CSS is by placing an embedded stylesheet inside a conditional comment.

<!--[if mso]>
  <style type="text/css">
    ul {
      margin: 0 0 0 24px !important;
    }
  </style>
<![endif]-->

Note the !important declaration which is needed to override inline styles.

The stylesheet will be parsed by the Word-based versions of Outlook. To other rendering engines, the whole block of code will look like an HTML comment they should ignore.

Although I’ve never needed to, you can get more specific with conditional comments that target specific versions of Outlook. Should you need to, here are the mso version numbers that correspond to each Word-based Outlook version.

<!--[if mso 12]>Outlook 2007<![endif]-->
<!--[if mso 14]>Outlook 2010<![endif]-->
<!--[if mso 15]>Outlook 2013<![endif]-->
<!--[if mso 16]>Outlook 2016<![endif]-->
It's only fair to share...Tweet about this on Twitter
Twitter
Share on Facebook
Facebook
Email this to someone
email
Share on Google+
Google+
This entry was posted in Email Dev and tagged , , , , . Bookmark the permalink.