What you need to know about the new Outlook.com

Last year, Microsoft announced it would replace its webmail Outlook.com by a version powered by the same engine as Office 365. Last month, Microsoft specified it is currently rolling out this new version of Outlook.com to users worldwide. While this version is not yet available for previous Outlook.com users in France, new users should have access it to it immediately.

I have been testing my emails on a regular basis on this webmail (and its Office 365 version) for a year. Here is a summary of my observations, and the good and bad news this webmail brings with it.

Out with the old hacks and bugs

No more Float or Margin hack

The old Outlook.com had a way well of its own to filter styles, and the support of certain properties depended on the case they were written. Thereby, to use CSS properties like float or margin, you had to write these properties in anything but lowercase. So float:left would be filtered, but not Float:left nor fLoAt:left. I identified 19 properties affected by this quirk. This madness is now over on the new Outlook.

Default styles

The old Outlook.com also had terribly annoying default styles. For example, some CSS rules targeting h2 or h2 tags added background-color and border-bottom for each of these tags. The webmail also had the following rule increasing the line-height for every single tag on the page.

* { line-height:142%; }

This is now over on the new Outlook.com, and I haven’t noticed any troublesome generic styles.

Styles prefixing

The old Outlook.com used to prefix CSS class names by “.ecx” and by the class “.ExternalClass”. So the following CSS rule…

<style>
    .foo { … }
</style>
<div class="foo">…</div>

… would be transformed by the old Outlook.com into :

<style>
    .ExternalClass .ecxfoo { … }
</style>
<div class="ecxfoo">…</div>

As you can see, the class name was also changed properly within the HTML class attribute. But there was a bug where any class name corresponding to an HTML tag name would be prefixed in a CSS rule, but not within the HTML class attribute. So the following CSS rule…

<style>
    .button { … }
</style>
<a class="button">…</a>

… would be transformed by the old Outlook.com into :

<style>
    .ExternalClass .ecxbutton { … }
</style>
<a class="button">…</a>

The button class on the HTML would not match the ecxbutton rule in CSS, and thus no style would apply. This is no longer the case on the new Outlook.com. It prefixes class names with “.x_” and a dynamically generated class name like “.rps_a113”. The previous example is now transformed by the new Outlook.com into :

<style>
    .rps_a113 .x_button { … }
</style>
<a class="x_button">…</a>

Mobile styles

The old Outlook.com also had a ridiculous bug on mobile where the “ExternalClass” it used to prefix styles with was purely and simply missing from the HTML. The outcome was that every rule within a <style> tag would become ineffective. The new Outlook.com applies the same prefixing rules on desktop and mobile. And this time, it correctly includes the class it prefixes everything with.

In with the new hacks and bugs

CSS Support

Not all is rosy with this new version of Outlook.com, starting with its CSS support. Over are the days of CSS transforms, CSS transitions, :hover styles, and above all : media queries. All the content of a media query is purely and simply removed. This makes of Outlook.com one of the rare email clients with no possible distinction between its mobile version and its desktop version. (As opposed to webmails like Gmail or Yahoo, for example, that support <style> tags and media queries on desktop, but not on mobile.)

Attribute selectors

The new Outlook.com also no longer support attributes selectors in CSS. But it does this in a terrible way that removes the attribute selector from the relevant CSS rule. Thus the following selector…

table [aria-labelledby="foo"] a { color:red; }

… is transformed by the new Outlook.com into :

.rps_a113 table a { color:red; }

In other words, this selector has a totally different meaning than the initial selector. And this can be a source of problems. But it can also bring solutions. I found that by using an attribute selector with a dummy attribute name, you can create styles that will only be applied on the new Outlook.com. I took the habit to use a selector named [owa] (for Outlook Web App). Thus the following selector…

[owa] .foo { color:red; }

… is transformed by the new Outlook.com into :

.rps_a113 .x_foo { color:red; }

This rule is thus only applied on Outlook.com. Handy !

No interactive emails

The new Outlook.com filters any <input> tag, removing any hope to make interactive emails.

Removed links

Another more common bug concerns links. This new version of Outlook.com will remove <a> tags if it estimates that the content of the href attribute is not a valid link. This content is then placed between brackets before the texte content of the related <a> tag. Thus the following code…

<a href="Hello">world</a>

… is transformed by the new Outlook.com into :

[Hello]world

The craziest bug I ever seen

This new version of Outlook.com also has one of the craziest bug I ever seen in a webmail. If a <style> tag contains an @​something declaration that itself contains a backslash character, then every font declared in a font-family property between quotes (simple or double) will be messed up with. For example, the following code…

<style type="text/css">
    @ { “\” }
</style>
<p style="font-family: 'Indie Flower', 'Arial', 'Helvetica', 'Lucida Grande', 'sans-serif';">Test 1</p>

… is transformed by the new Outlook.com into :

<style type="text/css"><!-- --></style>
<p style="font-family:'ni ">Test 1</p>

If every font is declared between quotes, the trimming algorithm Outlook.com employs sounds like the following :

  1. Count the number of fonts declared in the font stack, and substract two (and let’s call this n).
  2. Then start after the first opening quote (or double quote) in the font stack and only keep the first n odd characters.

In my previous example, we have five fonts (or font families) declared, so n equals three. Starting at the first opening quote, Outlook.com will only keep the characters n, i and space from the word Indie.

I told you it was crazy.

Anything else ?

This new version of Outlook.com certainly has more surprise for us. Feel free to share what you know on Twitter if you find anything else.