Proprietary Microsoft CSS properties

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

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. Their HTML and XML Reference lists the supported properties, but the actual documentation of the proprietary properties is sparse.

The Microsoft Office specific properties are mostly mso- prefixed, and the ones useful in emails can be divided into two main groups.

Office alternative properties

Most of the properties that start with an mso- prefix and end with an -alt postfix are direct alternatives to a standard CSS property. For example, the HTML and XML Reference vaguely explains how the mso-padding-alt property is used:

Padding is stored in the mso-padding-alt attribute if the normal HTML padding attribute does not apply.
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. Any time an element is styled with both padding and mso-padding-alt, the mso-padding-alt value takes precedence in Outlook, regardless of which order they’re in.

A padding value with an !important declaration does override mso-padding-alt, but because Outlook ignores inline styles with !important declarations, this only applies when overriding the padding from a stylesheet.

One use for Office alternative properties is coding bulletproof buttons without a VML version.

In most email clients, this code renders as a link with a background color, a thin border, and padding. The more modern clients will even render a CSS gradient and some nice rounded corners.

Outlook however, doesn’t even properly support padding on links.

If a link has padding only, it renders unpadded, but if it has both a border and padding, the it renders without a background color on the padding.

So to prevent Outlook from rendering an inflated or deflated button, we apply a border of the same color as the fallback background color, to act as faux padding.

The mso-border-alt value of 8px (the maximum border width in Outlook) overrides the border of 1px. And to avoid the transparent padding issue, we override the padding with an mso-padding-alt value of 0.

All of this without affecting any other email clients than the Word-based versions of Outlook.

Office only properties

Then there are the mso- prefixed properties that don’t correspond to a CSS equivalent, but to an Office feature. Many of these have no effect on Outlook, whereas others have almost too much of an effect.

mso-hide

If you have elements you want to completely hide from Outlook readers, the mso-hide: all; property is an easy way to do so. Be aware though, that this magic spell runs out once an email is forwarded in Outlook.

mso-line-height-rule

Many email developers will be familiar with this one. By default, Outlook will treat your line-height value as a minimum, and often increase it to its liking. To disable this behavior, add mso-line-height-rule: exactly; and Outlook will start to treat your line-height value as an exact value instead.

If you want this behavior for most of your email, you can simply apply mso-line-height-rule: exactly; at the level, instead of repeating it throughout the email code. One drawback is that this property can make Outlook crop images by the line height. If a 200px tall image is placed in element with aline-height is 20px, and mso-line-height-rule: exactly; is in effect, Outlook will only show the bottom 20px of the image.

The solution is to revert mso-line-height-rule back to the default value at-least on any elements where it’s causing an issue.

mso-text-raise

Unlike rendering engines intended for the web, Word renders text that sits firmly on the baseline. This discrepancy between Outlook and other email clients is generally not noticeable, but in designs that requires precise vertical alignment, mso-text-raise gives you full control.

For example, to vertically center the text within the line-height, set mso-text-raise to the difference between the font-size and the line-height, divided by two.

You can use negative mso-text-raise values too. If your line-height is less than your font-size, a negative mso-text-raise can prevent Outlook from cropping the text.

mso-effects-shadow

This isn’t a direct equivalent of the CSS3 property text-shadow, but a clunkier Office alternative that requires at least five separate properties, for a text shadow that only works in Outlook 2010 and up.

The mso-effects-shadow-alpha (shadow opacity) and mso-effects-shadow-dpiradius (shadow blur) properties are optional. Instead of an x and y offset of the shadow, Outlook’s approach uses a combination of mso-effects-shadow-dpidistance (shadow distance) and mso-effects-shadow-angledirection (shadow angle) to position the shadow. The mso-effects-shadow-pctsx and mso-effects-shadow-pctsy properties let you scale the shadow.

When to use
The convenient thing about mso- prefixed properties is that they let you code self-contained hacks that you can save as snippets and drop into any template, without touching the stylesheet. Assuming your ESP doesn’t strip out unrecognized properties, this approach is also the least likely to cause any issues with inliners or the likes.

The main limitation is that there are only so many useful mso- prefixed properties available.