Outlook specific CSS

Code, Outlook

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

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.

You can get more specific with conditional statements that target specific versions of Outlook.

<!-- [if mso 9]>Outlook 2000<![endif]-->
<!-- [if mso 10]>Outlook 2002<![endif]-->
<!-- [if mso 11]>Outlook 2003<![endif]-->
<!-- [if mso 12]>Outlook 2007<![endif]-->
<!-- [if mso 14]>Outlook 2010<![endif]-->
<!-- [if mso 15]>Outlook 2013<![endif]-->
<!-- [if mso 16]>Outlook 2016<![endif]-->

Conditional statements can be used to target Outlook in a variety of ways:

  • lt is less than a specific version.
  • gt is greater than a specific version.
  • lte is less than or equal to a specific version.
  • gte is greater than or equal to a specific version
<!-- [if gt mso 11]>
<style type="text/css">
    p {
      margin: 10px 0 10px 0 !important;
    }
  </style>
<![endif]-->

Conditional classes

Conditional comments can be used to to add different classes to the element when viewed in Internet Explorer.

<!-- [if IE]><html class="ie"><![endif]-->
<!-- [if !IE]><!--><!--<![endif]-->

The .ie class (or a version specific class) can then be used to prefix a CSS selector in your main stylesheet. The result is a rule that will only be matched in Internet Explorer.

<style type="text/css">
  .ie p {
    font-size: 18px !important;
  }
</style>

This exact code actually works in the older versions of Outlook that were based on Internet Explorer. These clients would render the email with whatever version of Internet Explorer was installed on the computer, so you could target specific Internet Explorer version, but not specific Outlook versions like 2000 or 2002.

This approach can be used to work around the lack of media query support in old Internet Explorer versions when coding mobile-first emails. Simply repeat the desktop styles outside of the media query, and give each selector an .ie prefix.

<style type="text/css">
  .layout {
    width: 320px;
  }
  @media (min-width: 620px) {
    .layout {
      width: 600px !important;
    }
  }
  .ie .layout {
    width: 600px !important;
  }
</style>

The conditional class technique can also be applied in Outlook 2007 and up. These versions don’t support class names on the element, so to get it working, place the conditional comments around the element instead to apply the .mso class.

<!-- [if mso]><body class="mso"><![endif]-->
<!-- [if !mso]><!--><!--<![endif]-->

We can then use .mso prefixed selectors to apply CSS specifically for Word-based Outlook.

<style type="text/css">
  h1 {
    font-family: Telefon, sans-serif;
  }
  .mso h1 {
    font-family: sans-serif !important;
  }
</style>

But by using an .mso prefixed selector, we can override the font-family to an Outlook safe choice like the generic sans-serif family, without affecting other email clients.