When it was announced last month, the all new MySpace Mail was touted as an instant big player in the web-based email client market. With 130 million global users, that would make it the 4th largest email provider in the world and the second largest in the US. Of course, these numbers refer to the total number of MySpace users, not necessarily the number that will be using MySpace Mail for general email use.
Even so, it’s still a big number. With this in mind, my first thought was to see just how good the CSS support was in the new beta. The update finally rolled my way yesterday, and I immediately fired a copy of our CSS guide test page into my MySpace account. When I opened the email, I was greeted with this scary sight…
After a hurried check of the source code, I realized MySpace was converting my character entities <style> code into a working <style> tag. It mustn’t have liked that very much because the rest of the email content after that was automatically removed. This is the first time I’ve ever seen an email client handle character entities like this. First lesson of the day: MySpace Mail clearly doesn’t like you including CSS in the body of HTML emails.
Once I removed the offending code, the rest of the email displayed without issue.
With that out of the way, the testing could begin.
The Results
I’ve collated the results and matched them up against CSS support in all the other popular web-based email clients. I’ve also updated our complete CSS guide (check the PDF version for the results), so you can see how MySpace compares against the other 23 email clients on the market. You can check out a summary of what I found below the results themselves.
| Style Element | Yahoo! Mail | Yahoo! Classic | Live Hotmail | Gmail | MySpace Mail |
| <style> in <head> |  |
|
|
 |
|
| <style> in <body> | |
|
|
|
|
| Link Element | Yahoo! Mail | Yahoo! Classic | Live Hotmail | Gmail | MySpace Mail |
| <link> in <head> | |
|
|
|
|
| <link> in <body> | |
|
|
|
|
| Selectors | Yahoo! Mail | Yahoo! Classic | Live Hotmail | Gmail | MySpace Mail |
| e | |
|
|
|
|
| * | |
|
|
|
|
| e.className | |
|
|
|
|
| e#id | |
|
|
|
|
| e:link | |
|
|
|
|
| e:active, e:hover | |
|
|
|
|
| e:first-line | |
|
|
|
|
| e:first-letter | |
|
|
|
|
| e > f | |
|
|
|
|
| e:focus | |
|
|
|
|
| e+f | |
|
|
|
|
| e[foo] | |
|
|
|
|
| Text & Fonts | Yahoo! Mail | Yahoo! Classic | Live Hotmail | Gmail | MySpace Mail |
| direction | |
|
|
|
|
| font | |
|
|
|
|
| font-family | |
|
|
|
|
| font-style | |
|
|
|
|
| font-variant | |
|
|
|
|
| font-size | |
|
|
|
|
| font-weight | |
|
|
|
|
| letter-spacing | |
|
|
|
|
| line-height | |
|
|
|
|
| text-align | |
|
|
|
|
| text-decoration | |
|
|
|
|
| text-indent | |
|
|
|
|
| text-transform | |
|
|
|
|
| white-space | |
|
|
|
|
| word-spacing | |
|
|
|
|
| vertical-align | |
|
|
|
|
| Color & Background | Yahoo! Mail | Yahoo! Classic | Live Hotmail | Gmail | MySpace Mail |
| color | |
|
|
|
|
| background | |
|
|
 |
|
| background-color | |
|
|
|
|
| background-image | |
|
|
|
|
| background-position | |
|
|
|
|
| background-repeat | |
|
|
|
|
| Box Model | Yahoo! Mail | Yahoo! Classic | Live Hotmail | Gmail | MySpace Mail |
| border | |
|
|
|
|
| height | |
|
|
|
|
| margin | |
|
|
|
|
| padding | |
|
|
|
|
| width | |
|
|
|
|
| Positioning & Display | Yahoo! Mail | Yahoo! Classic | Live Hotmail | Gmail | MySpace Mail |
| bottom | |
|
|
|
|
| clear | |
|
|
|
|
| clip | |
|
|
|
|
| cursor | |
|
|
|
|
| display | |
|
|
|
|
| float | |
|
|
|
|
| left | |
|
|
|
|
| opacity | |
|
|
|
|
| overflow | |
|
|
|
|
| position | |
|
|
|
|
| right | |
|
|
|
|
| top | |
|
|
|
|
| visibility | |
|
|
|
|
| z-index | |
|
|
|
|
| Lists | Yahoo! Mail | Yahoo! Classic | Live Hotmail | Gmail | MySpace Mail |
| list-style-image | |
|
|
|
|
| list-style-position | |
|
|
|
|
| list-style-type | |
|
|
|
|
| Tables | Yahoo! Mail | Yahoo! Classic | Live Hotmail | Gmail | MySpace Mail |
| border-collapse | |
|
|
|
|
| border-spacing | |
|
|
|
|
| caption-side | |
|
|
|
|
| empty-cells | |
|
|
|
|
| table-layout | |
|
|
|
|
What this means for email designers
The results aren’t fantastic, but they’re also not very surprising considering the stance MySpace has typically taken with their design and standards support.
The first thing you’ll notice is that there is absolutely no support for using an actual stylesheet. You can’t externally reference a stylesheet or even add your CSS inside <style> tags. Just like Gmail, you’ll have to move all your CSS inline to get a half decent result. Most of you are doing this already (you are, aren’t you), and tools like PreMailer and our automated CSS inliner make this a click away anyway.
If you’re looking at relying less on tables for structure and trying to dabble in a little float action, you might want to reconsider that option. While MySpace Mail does offer support for float, it doesn’t offer any support for the width attribute. Unless you’re aligning images, it’s nested tables all the way I’m afraid.
The truth is, MySpace Mail’s CSS support isn’t any better or worse than Gmail’s. Considering Gmail is already considered the lowest common denominator in email design circles, this won’t mean any extra work for you, even if you eventually have a large number of @myspace subscribers. What it does mean is that we have yet another email client with loathsome CSS support that we need to convince otherwise.
One step forward, two steps back.
