Last year, Litmus held a community contest which theme was “Emails Worth Forwarding”. In order to participate, I created an email I called Super Mail Forward. It’s an email you can forward between the desktop webmails of Gmail, Yahoo, Outlook.com and AOL, evolving with each forward. It’s a fantastic exercise that taught me a lot of things specific to these webmails. Here are a few details.

The email is composed of four question blocks (from Super Mario World). Every time you forward the email on the expected webmail, in the right order, the first unopened block will be transformed into a mushroom of a different color. If you send the email on one of the four supported webmails, but not in the expected order, the question block corresponding to the expected position for this webmail will turn red.

If you send the email first in Gmail, the block corresponding to Gmail’s order turns red.

I wanted to make this exercise in order to see how many times you could forward an email before its code, transformed by webmails, would become an incomprehensible mess. And to my biggest surprise, you can go pretty far. In fact, webmails like Yahoo, Outlook.com or AOL don’t deteriorate the HTML code of an email when forwarding it more than when they receive it in the first place. This means that since Outlook.com filters the CSS background-image property, this property will also be absent when you forward an email from Outlook.com.

The only exception to this behavior is Gmail. On top of filtering any class or id attributes (which is in itself already pretty annoying), Gmail will remove any <style> tag and any attribute usually supported (like lang or aria-labelledby) when you forward an email. So I quickly realized that if I wanted to include Gmail in my list of webmails supported by my email, it would inevitably be in the last position. I also picked AOL as the first webmail early on, as it’s the most permissive webmail regarding styles filtering. And after a lot of tests and hesitations, I picked Yahoo in second position and Outlook.com in third position.

Each block of the email is composed of sixteen lines and sixteen columns. Each cell has a background color that changes depending on the current case :

either we’re on the right webmail in the expected order,

or we’re on one of the four supported webmails but not in the expected order,

or we’re not on one of the supported webmails.

By default, each cell has a background property in a style attribute corresponding to its final state as desired in Gmail. The display in other clients is then handled with a play on classes. The final code for each cell looks like this :

<td style="background:#ee1c25; background:#d89f37 url(spacer.gif);" class="mushroom-ee1c25 block-d89f37" lang="block-d89f37"></td>

First step : AOL

When landing on AOL, the webmail prefixes each selector. Thus, the selector “.foo” becomes “.aolReplacedBody .foo”. In order to target AOL and activate the first block, I used a filtering bug on AOL I discovered back then. When a background property contains a url() to an image within a <style> tag, AOL incorrectly replaces the path of this image. Thereby, the following code…

.block-fff {

background:url('http://i.imgur.com/6qtuIRR.gif');

background:#fff;

}

… is transformed by AOL into the following :

.block-fff {

background-image:url("<a href="http://i.imgur.com/6qtuIRR.gif"" target=_blank>http://i.imgur.com/6qtuIRR.gif"</a>;);

background:#fff;

}

Yes. AOL adds HTML higgledy-piggledy in a styles declaration. This behavior is quite inconvenient because it will cause modern browsers to ignore any following styles. But in my case, that suit me fine, and I was able to use this bug to my advantage. With the following code, I activate the mushroom for the first question block in every browser (with the rules “.step1 .mushroom-X”). And then, I immediately reactive the colors of the default block for the first step (with the rules “.step1 .block-Y”). But thanks to the background image bug, AOL will ignore these styles, and keep the mushroom colors.