Outlook Conditional CSS

It’s no secret that Microsoft’s Outlook desktop email client is the bane of every email designer’s existence. With its terrible CSS support, getting an email to look as good in Outlook as it may in Yahoo or Gmail can be difficult at the best of times.

But why should your email look exactly the same in every client? The pursuit of pixel-perfect design can often leave you spinning your wheels trying to fix tiny bugs and discrepancies that no one will notice. Sometimes, it’s okay to take the path of least resistance; Dan Cederholm espouses the same thought in regard to websites.

With the multitude of weird rendering issues Outlook introduces into emails, it makes more and more sense to provide an Outlook-specific stylesheet, akin to what we do for mobile emails. Using Microsoft’s conditional comments, you can do just that. Here’s all you need, and it can be placed after your main CSS:

<!--[if gte mso 9]>
    <style type="text/css">
    /* Your Outlook-specific CSS goes here. */
    </style>
<![endif]-->

It’s the same thing you’d use to target Internet Explorer 7 when building a website, except it targets Microsoft Office, or ‘mso’. In the example above, ‘gte’ is added to have the comment apply only to versions of Microsoft Office greater than or equal to 9. You can also target lesser, or older, versions by using ‘lt’. Using ‘gt’ and ‘lte’ will target versions greater than, or less than or equal to, respectively.

Outlook Version Numbers

Using Microsoft Office version numbers allows you to target specific Outlook clients. In the example above, ‘mso 9’ is Office 2000, which means you’re targeting Outlook 2000. Other version numbers allow you to target other clients, meaning you can build stylesheets tailored to each version of Outlook.

  • Outlook 2000 - Version 9
  • Outlook 2002 - Version 10
  • Outlook 2003 - Version 11
  • Outlook 2007 - Version 12
  • Outlook 2010 - Version 14
  • Outlook 2013 - Version 15

Because Outlook 2003 - 2003 was driven by the IE6 rendering engine, those client versions are relatively stable. From Outlook 2007 and on, the rendering engine was changed to Word, making Outlook incredibly problematic for email. You can leverage this conditional CSS to squash bugs and greatly reduce your email development-related headaches.

The Outlook 2007-2010 Page Break Problem

One of the best reasons to use this conditional CSS is to mitigate various rendering issues in Outlook, including its page break issue. Outlook 2007, or more specifically the Word engine, has a document length limit of 22 inches, or around 1800 pixels. When a document - an email, in this case - hits that length, Outlook inserts a page break to aid with document printing. This page break can have serious effects on an email:

By using conditional styles and making your emails responsive to Outlook, you can mitigate or even avoid the page break problem and other rendering issues entirely.

In our own testing, we’ve found that this bug no longer presents itself in Outlook 2013. Progress!