CSS support in MySpace Mail

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…

{title}

After a hurried check of the source code, I realized MySpace was converting my character entities &lt;style&gt; 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.

{title}

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> Yes Yes Yes No No
<style> in <body> Yes Yes Yes No No
Link Element Yahoo! Mail Yahoo! Classic Live Hotmail Gmail MySpace Mail
<link> in <head> Yes Yes Yes No No
<link> in <body> Yes Yes Yes No No
Selectors Yahoo! Mail Yahoo! Classic Live Hotmail Gmail MySpace Mail
e Yes Yes Yes No No
* Yes No Yes No No
e.className Yes Yes Yes No No
e#id Yes Yes No No No
e:link Yes Yes Yes No No
e:active, e:hover Yes Yes Yes No No
e:first-line No Yes No No No
e:first-letter No Yes No No No
e > f Yes Yes No No No
e:focus Yes Yes No No No
e+f No No No No No
e[foo] Yes Yes No No No
Text & Fonts Yahoo! Mail Yahoo! Classic Live Hotmail Gmail MySpace Mail
direction Yes Yes Yes No Yes
font Yes Yes Yes Yes Yes
font-family Yes Yes Yes Yes Yes
font-style Yes Yes Yes Yes Yes
font-variant Yes Yes Yes Yes Yes
font-size Yes Yes Yes Yes Yes
font-weight Yes Yes Yes Yes Yes
letter-spacing Yes Yes Yes Yes Yes
line-height Yes Yes Yes Yes No
text-align Yes Yes Yes Yes Yes
text-decoration Yes Yes Yes Yes Yes
text-indent Yes Yes Yes Yes Yes
text-transform Yes Yes Yes Yes Yes
white-space Yes Yes Yes Yes Yes
word-spacing Yes Yes Yes Yes Yes
vertical-align Yes Yes Yes Yes Yes
Color & Background Yahoo! Mail Yahoo! Classic Live Hotmail Gmail MySpace Mail
color Yes Yes Yes Yes Yes
background Yes Yes No Partial or buggy support Yes
background-color Yes Yes Yes Yes Yes
background-image Yes Yes No No Yes
background-position Yes Yes No No Yes
background-repeat Yes Yes No No Yes
Box Model Yahoo! Mail Yahoo! Classic Live Hotmail Gmail MySpace Mail
border Yes Yes Yes Yes Yes
height Yes Yes Yes Yes No
margin Yes Yes No Yes Yes
padding Yes Yes Yes Yes Yes
width Yes Yes Yes Yes No
Positioning & Display Yahoo! Mail Yahoo! Classic Live Hotmail Gmail MySpace Mail
bottom No No No No No
clear Yes Yes Yes Yes Yes
clip No No No No No
cursor Yes Yes Yes No Yes
display Yes Yes Yes Yes Yes
float Yes Yes Yes Yes Yes
left No No No No No
opacity No No No No Yes
overflow Yes Yes Yes Yes No
position No No No No No
right No No No No No
top No No No No No
visibility Yes Yes Yes No Yes
z-index No No No No No
Lists Yahoo! Mail Yahoo! Classic Live Hotmail Gmail MySpace Mail
list-style-image Yes Yes No No Yes
list-style-position Yes Yes Yes Yes Yes
list-style-type Yes Yes Yes Yes Yes
Tables Yahoo! Mail Yahoo! Classic Live Hotmail Gmail MySpace Mail
border-collapse Yes No Yes Yes Yes
border-spacing Yes Yes No Yes Yes
caption-side No No Yes Yes No
empty-cells Yes Yes Yes Yes Yes
table-layout Yes Yes Yes Yes No

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.

Posted by David Greiner

8 Comments

  • Jake Holman
    27th August

    Another one of those providers we, as designers, have to tell our Customers that they probably won’t get the design they want due to the lack of support.

  • Joshua Russell
    27th August

    Interesting post, with very interesting results.
    As you said, Myspace’s support for standards its very poor.

    I don’t believe that this will take off as a popular email client. The only audience your EDM’s are going to target are 13 year old emo’s!

    That aside, I really enjoyed the read!

  • Alistair Holt
    28th August

    It doesn’t look too bad considering the lengths you have to go if you want to support Outlook 2007 anyway. Kind of feels like were going backwards in general though.

  • MSC
    28th August

    wow, thank you for taking the time to put this together. it was very interesting to learn this!

  • russ Weakley
    28th August

    Great resource as usual. Thanks for the effort putting the tests together.

  • Dean
    28th August

    I wouldn’t worry about it - MySpace is being killed off by the likes of Facebook and Twitter.

  • Stone Chen
    14th September

    Thanks for the constantly-updated reports, they are extremely useful to me. But I have a couple of recommendations. First, even though css background-image and such are not supported in many clients, there are work-arounds using the ancient background attributes in table, maybe a walk-around row should be place under so people can know what can be done (I’m not 100% sure but I think this works in Outlook 2007, but of course, there’s no repeat control so you have to be very careful about where to cut your background image). The other thing is international web clients. I’m here in China, and Sina, Sohu, QQ and particularly 163 are the major web email services here, not Gmail or Hotmail. Foxmail, a Windows app, also has a bigger share of the pie than Outlook (I think). Considering the market, I suggest you guys find someone in your camp that can read Chinese, and test the stuff on these apps. Thanks

  • Joshua
    18th September

    Any plans to test support on an Android device (I see your full report has iPhone listed). More than happy to volunteer. :)

Sign up for free.
Then send campaigns for as little as $9/month

Create an account