While it’s not exactly clear when the standard padding property does and doesn’t apply in Microsoft’s view, we email developers only really need to concern ourselves with how the mso-padding-alt property is interpreted when it does exist. Padding is stored in the mso-padding-alt attribute if the normal HTML padding attribute does not apply. For example, the HTML and XML Reference vaguely explains how the mso-padding-alt property is used:

Most of the properties that start with an mso- prefix and end with an -alt postfix are direct alternatives to a standard CSS property.

The Microsoft Office specific properties are mostly mso- prefixed, and the ones useful in emails can be divided into two main groups. Their HTML and XML Reference lists the supported properties, but the actual documentation of the proprietary properties is sparse. In order to maintain support for both HTML documents and various Office specific functionality, Word generates markup with a mix of standard CSS and its own Office specific properties. If your workflow involves a pre-processor that necessitates external stylesheet files, then conditional classes can enable Outlook targeting without placing the CSS itself inside conditional comments. This technique is also less likely to interfere with inliners or other parsing steps your template might encounter along the way. When to useĬonditional stylesheets are great if you’re hand coding an email template and you need to apply one or more Outlook specific styles throughout the email. 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. The most common way to code Outlook targeted CSS is by placing an embedded stylesheet inside a conditional comment. Thankfully, when Outlook 2007 came out, the Office team took a cue from Internet Explorer and implemented support for conditional comments, as James Edwards discovered and shared in a Sitepoint article.Ĭonditional comments allow us to add bits of HTML that are only read by the Word-based versions of Outlook. To help cope, I wanted to share some techniques I use to code CSS that’s targeted only at Outlook, as well as a few examples of when this is useful. These problems show no signs of stopping as Word is still used as the rendering engine as of the latest Outlook 2016 for Windows.

Outlook 2016 html signature template